界面图鉴
气泡提示Tooltip
气泡提示到底是什么？它和 Popover、Toast 都是「冒出来的小框」，怎么分？
鼠标停上去才冒出的一小句解释，悬停即现、移开即隐，从不占地方。
01 · 拆开看看
这一块由什么组成
名字就是「小工具的提示」：鼠标停上去冒一句、移开就没，永远不占版面。它只解释、不承载操作——里面要放按钮的，那叫 Popover。组成：
触发目标Target
被悬停或键盘聚焦的那个东西：图标、缩略文字、问号。
气泡Bubble
深色小框，一两句话，不换行最好。
小箭头Arrow
指向目标，说明「我在解释的是它」。
出现延迟Delay
停留两三百毫秒才出现，鼠标扫过时不会一路乱闪。
02 · 常见变体
同一个零件，几种摆法
默认位置，箭头朝下指着目标。
目标贴着屏幕上沿时，改从右边冒出来。
文字旁附一个 ⌘C，顺手教一招。
03 · 火眼金睛
这个页面里，哪一个是 Tooltip？
三个小框都在说话，但只有一个是「鼠标停上去才冒出来」的。
点一块试试，看看它叫什么
不是它。它要点一下才打开，里面还放了按钮——能操作的不是 tooltip，是 popover。
就是它！鼠标停在「?」上就冒一句解释，移开就没，只说明、不操作。
不是它。Toast 是系统主动弹给你的反馈，几秒后自己消失，跟鼠标在哪儿没关系。
04 · 用与不用
什么时候该上它
- 图标按钮的名字
- 被截断文字的完整版
- 字段旁边的一句解释
- 移动端——手指没有「悬停」
- 必须看到的信息——藏在悬停里等于没写
- 里面要放按钮、链接——那是 Popover
05 · 想一想
一道题，检查眼力
工具栏上一个只有图标、没有文字的按钮，怎么让人知道它是干嘛的？
对。停一下就知道是什么，不占版面，也不打断操作。
点完才知道它是干嘛的，已经晚了——万一是「删除」呢？
为一个按钮的名字拦住整页，太重了。弹窗留给需要做决定的事。
06 · 说给 AI 听
让 AI 改它时，这样说
说清触发方式和位置，再补一句「键盘聚焦也要能显示」，无障碍就不会漏。
给工具栏所有图标按钮加 tooltip，悬停 300 毫秒后显示名字
tooltip 默认出现在按钮上方，贴近屏幕边缘时自动翻到下方
这个「?」图标的 tooltip 改成一句话说明扣费规则
表格里被截断的单元格，悬停时用 tooltip 显示完整内容
最容易踩的坑
手机上没有鼠标，也就没有「悬停」——tooltip 里的信息在移动端会直接消失。关键信息别只靠它。