气泡提示
Tooltip也常被叫作：悬浮提示悬停提示Tooltip小问号提示hover 提示
「鼠标移到某个图标或字上，旁边浮出一小段解释，移开就消失，比如问号旁边的说明。」
气泡提示 Tooltip
鼠标悬停时才出现的微型说明，装「锦上添花」的补充信息，装不了关键信息。
气泡提示（Tooltip）是鼠标悬停在某处时浮现的一小段说明，移开就消失。它装的是补充信息：按钮旁边的问号、「保存」旁边那句「会覆盖旧版本」、表格表头对列含义的解释。它的价值是不占版面——平时看不见，需要时才出现，页面保持干净。
它的死穴是依赖悬停，而悬停需要鼠标。手机上没有悬停（手指一碰就是点击），键盘用户根本没有鼠标。所以关键信息绝不能只放在气泡提示里——「保存会覆盖旧文件，无法恢复」这种用户必须知道的话，如果只存在于悬停提示里，手机用户永远看不到。凡是「必须知道」的放页面上看得见的地方，「锦上添花」的才放气泡里。
实现上有三个细节：提示内容一句话以内（写长了说明这段信息该找个更显眼的位置）；触发不能只有鼠标，键盘聚焦也要能触发，读屏要能念出内容；提示不能超出屏幕，窄屏下出现在屏幕边缘时要会自动换边。
长什么样 真实可交互，不是截图
鼠标悬停在问号上会浮出这段说明。但注意：这句话用户「必须知道」，如果只藏在悬停提示里，手机用户永远看不到——关键信息要放在页面可见处。
拆开看，里面有这几块
-
1
触发元素 Trigger
悬停或聚焦的目标：问号图标、按钮、表头文字。
-
2
提示内容 Content
一句话以内的补充说明，说清一个点就够。
-
3
位置 Placement
通常出现在元素上方或旁边，窄屏下要自动换边，不出屏幕。
-
4
触发方式 Trigger method
鼠标悬停 + 键盘聚焦都要能触发，不能只支持鼠标。
常见的有哪几种
表单字段旁的补充说明，解释这一栏怎么填。
用在：表单项、设置项
解释这一列统计口径或含义。
用在：表格、报表
说明点击的后果或注意事项，只放次要信息。
用在：按钮旁的小提醒
容易搞混？这样区分
什么时候用得上
补充说明「这个字段怎么填、有什么限制」，一句话以内。
解释这一列的含义或统计口径，不占表格版面。
次要的点击提醒放气泡；关键后果（如覆盖、删除）放页面可见处。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【范围】只改 [这个页面] 的气泡提示，不动其他布局 【要求】 - 在 [哪些元素] 上加气泡提示，内容：[一句话以内的说明] - 触发方式：鼠标悬停能出现，**键盘 Tab 聚焦也要能出现**，移开/失焦就消失 - 提示内容读屏软件能读出来 - 提示出现位置不超出屏幕边缘（窄屏会自动换边） - 注意：页面上任何用户「必须知道」的信息（如「保存会覆盖旧版本」）**不许**只放在气泡里，要放在页面可见处 【边界】不要改页面其他内容；不要新增第三方组件库；不要把已有的可见文字改成悬停才显示 【交付】告诉我改了哪些文件、我悬停哪个元素能看到哪句提示、只用键盘能不能触发、以及哪部分你没验证
这段话最关键的两条是「键盘聚焦也要能触发」和「关键信息不许只放气泡里」——前者挡住只做鼠标悬停的偷懒实现，后者挡住把关键说明藏进手机用户看不到的地方。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 鼠标悬停触发元素，提示出现；移开鼠标，提示消失。
- 只用键盘：Tab 聚焦到触发元素，提示出现；移开焦点，提示消失。
- 提示内容一句话能读完，说清了补充信息。
- 在手机宽度（浏览器缩窄）下，提示不超出屏幕边缘。
- 检查关键信息：用户必须知道的说明（如「保存会覆盖」）没有只藏在悬停提示里，页面可见处能看到。
- 读屏能念出提示内容（如有读屏工具）。
它常这么糊弄你
- 「已加提示」——但只有鼠标悬停能触发，手机、键盘用户完全看不到。
- 「保存会覆盖旧版本」只放在气泡里——手机用户永远看不到这句关键信息。
- 提示写得跟小作文一样——用户读不完，说明这信息该换个更显眼的展示方式。
- 提示出现在屏幕边缘外，窄屏下根本看不见。
- 把页面上已有的可见文字改成「悬停才显示」——信息被藏起来了。
气泡提示能验到「主路径」层：悬停一次、键盘走一遍、缩窄窗口看一眼，就验完了。重点检查「关键信息有没有被藏进气泡」。
考考你 选一个你觉得对的
「保存会覆盖上一次的版本，无法恢复」这句关键说明，放在哪最合适？
这是用户「必须知道」的信息，要常驻可见。B 手机用户没有悬停，永远看不到；C 出错才说等于让用户先踩坑；D 页脚没人看。关键信息放显眼处，气泡只装补充。