返回知识库

界面与交互 · 反馈与临时层

文字提示Tooltip

在悬停或聚焦时出现的简短补充说明:键盘聚焦与触屏也要能触发,提示只补充、不承载唯一关键信息。

图标按钮工具栏:三条触发路径都要通

亲手切「鼠标悬停 / 键盘聚焦 / 触屏」三条输入方式,看提示气泡是否都能弹出;触屏没有悬停,改用「为触屏显示提示」主按钮;打开反例看删除后果在触屏下彻底消失。

第 0 步:这是一段文档编辑器的图标工具栏(保存 / 分享 / 删除),图标没有可见文字。切「鼠标悬停 / 键盘聚焦 / 触屏」三条输入路径,看提示是否都能弹出;触屏没有悬停,改用「为触屏显示提示」主按钮;打开反例后看删除后果在触屏下消失。

输入方式
保存分享永久删除永久删除 · 常驻可见
当前提示暂无提示悬停或聚焦任意图标;触屏方式改点主按钮

对照:当前是鼠标悬停方式,提示气泡还没出现。原因:Tooltip 只在用户主动悬停或聚焦图标时出现,平时不占位。下一步:把鼠标移到任意图标上看提示弹出,或切到「键盘聚焦」「触屏」对比三条触发路径。

面板教会的知识点

把刚才操作里看到的现象命名为六条规则。

  • 悬停与聚焦都要弹:鼠标移入和键盘 Tab 聚焦都能让提示出现——只监听 hover 会让键盘用户看不到,这是最常见的遗漏。
  • 触屏要替代入口:触屏没有悬停和 Tab,必须给一个「显示提示」按钮或长按等替代路径,否则触屏用户永远看不到提示。
  • 提示只补充:提示是简短的文字说明,里面不放按钮、链接或表单;承载交互内容的浮层是 popover,不是 tooltip。
  • 关键后果要常驻:删除、不可恢复这类危险后果必须常驻在按钮可访问名称或旁注里,不能只写进会消失的提示——切到触屏方式时反例就暴露了。
  • 用 aria-describedby 关联:提示元素标 role="tooltip",触发按钮用 aria-describedby 指向它,读屏才能稳定读出。
  • 离开就消失:鼠标移开或焦点离开,提示要立刻消失,不挡住后续操作;显示和隐藏都要及时。

什么时候用 Tooltip

从「这是补充说明还是关键信息」判断,而不是看地方够不够小。

适合

图标按钮的简短释义(保存 / 分享 / 关闭)、缩写词的全称展开、被截断文字的完整内容、表单字段格式提示。用户就算错过,操作仍能从按钮可访问名称完成。

先别用

需要点击的菜单或操作(→ popover)、危险操作的确认(→ popconfirm)、必须读完的重要告知(→ alert)、关键数据或不可恢复的后果——这些都不能只放进会消失、触屏够不到的提示里。

怎么用:从触发到关联的最短路径

一次到位的检查顺序。

  1. 给可访问名称:图标按钮先写好 aria-label,提示只是补充,不是唯一信息来源。
  2. 挂两条触发:onMouseEnter / onMouseLeave 与 onFocus / onBlur 都要驱动提示,缺一条就会有一类用户看不到。
  3. 给触屏替代:没有悬停的设备提供一个「显示提示」按钮或长按手势;触屏用户不该靠猜。
  4. 建语义关联:提示标 role="tooltip",按钮用 aria-describedby 指向它,读屏同步读出。
  5. 控时长与减动效:显示和隐藏延迟不要太长;出入动画在 prefers-reduced-motion 下静态呈现,不挡阅读。

同一图标按钮:正例与反例

目标都是解释图标含义。差别只在关键后果是否常驻、触屏是否有替代入口。

正例

图标按钮有 aria-label;提示在悬停和聚焦时都弹出;删除按钮旁常驻「永久删除」标记;触屏提供「显示提示」按钮。三类用户都能得到信息。

键盘、触屏、读屏用户都不被落下,关键后果常驻可见。
反例

只监听 onMouseEnter;删除后果只写进悬停提示;触屏没有任何替代入口。结果:键盘用户、触屏用户、读屏用户都看不到,误删了都不知道。

触屏用户彻底看不到删除后果,操作不可逆。

快速自测

一个只有图标的「删除」按钮,删除后果应该放在哪里?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。