Tooltip
文字提示
WebDesktop上手难度: 容易
鼠标悬停时冒出来的一行小字，告诉用户这个图标是干什么的。
Live Demo
真的可以点你刚才看到的这个：把鼠标放在一个陌生图标上，旁边浮出一行「导出为 PDF」的小黑条——就是 Tooltip。
它到底是什么
Tooltip 只做一件事：命名和解释。它不能放按钮（那叫 Popover），也不能承载关键操作。它最大的限制是触屏设备上几乎无法使用，所以不能承载唯一信息。
提示tooltip悬浮提示文字提示气泡hover hint
Anatomy · 它由什么组成
Trigger触发元素
通常 focusable
Bubble气泡
深色底白字，圆角 6px
Text文字
≤2 行，不换长句
Arrow小箭头
指向触发元素
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| Icon Button 的含义不明确，需要解释 | 用 |
| 补充说明某个数字或缩写（首字母缩写） | 用 |
| 被截断的文字需要看全文 | 用 |
| 需要点击里面的按钮 | 不用 |
| 这是理解页面所必需的信息 | 不用 |
Tooltip 在移动端基本无法触发，所以关键信息必须有第二处出口。
延迟别太长（500ms 左右合适），否则会让页面显得迟钝。
Similar Patterns
别搞混一句话区分：鼠标悬停时冒出来的一行小字，告诉用户这个图标是干什么的。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
给工具栏的 Icon Button 加 Tooltip：悬停 400ms 后显示图标名称，鼠标移开或按 Esc 立即消失，同时支持键盘 focus 时显示。
不要只对 AI 说
Bad → Better不要这样对 AI 说
鼠标放上去给个提示文字。
改成这样说
给 Icon Button 加 Tooltip：hover 400ms 后显示图标名称、离开或 Esc 立即隐藏、支持键盘 focus 触发、加 aria-describedby、屏幕顶部时自动翻转到下方、文字 ≤2 行。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。