SuperAPI AI 工具集

tooltip

通用与其它

查看项目

更新于 10-16 08:10

技能介绍

用途:Tooltip 是一种小型弹窗,在用户悬停、聚焦或与元素交互时提供额外上下文信息,帮助解释图标、按钮或不易自明的文字。分为简单 Tooltip(悬停或聚焦时出现的简短文字)和富文本 Tooltip(可含格式化文本、图标、图片或交互元素)。

适用场景:澄清图标或缩写、补充表单字段或表头信息、为复杂操作显示辅助文字、解释禁用元素、显示键盘快捷键,以及提供超出简短描述的深入说明。

避免场景:用户必须阅读的关键信息(如错误消息)、应持续可见的提示、需要用户与 Tooltip 本身交互、Tooltip 是唯一信息传达方式(无障碍问题),以及以移动端为主、悬停行为不直观的交互。

实现流程:先确认模式与问题及约束匹配,再从 references/pattern.md 的解剖与示例中选择最小可行变体,先应用无障碍、性能与交互护栏,再做视觉打磨,最后用测试指南验证键盘、屏幕阅读器、响应式与失败场景。

无障碍:Tab 将焦点移到触发元素并显示 Tooltip,Shift+Tab 移开焦点时关闭,Escape 手动关闭(若可关闭),Enter/Space 激活需显式触发的 Tooltip。交互式 Tooltip 必须支持 Escape 关闭;屏幕阅读器需在触发元素上用 aria-describedby,在容器上用 role="tooltip"。

性能目标:显示延迟 300-500ms,动画时长小于 200ms,复用单个 Tooltip 实例,内存小于 1KB,使用事件委托。

常见错误:消失过快(应保持 3-5 秒或悬停时保持打开)、仅靠悬停导致键盘不可用、遮挡输入框或按钮。相关模式包括 modal、popover、selection-input。完整实现细节见 references/pattern.md,模式页为 https://uxpatterns.dev/patterns/content-management/tooltip。