工具提示
Tooltip
别名:提示气泡悬浮提示气泡提示悬停提示小黑框提示title 提示鼠标放上去显示的小提示
这是什么
悬停在元素上短暂出现的小型文字气泡，用来解释图标按钮、缩写或被截断的文本。 纯提示、不可交互，移开即消失；通常延迟约 300ms 出现以避免扫过时闪烁。
名词辨析
Tooltip 是悬停/聚焦时的简短说明；Popover 可交互；Label 是常驻表单标签。Tooltip 不应承载交互或关键信息。
交互实验室
试一试，再决定怎么用悬停或聚焦触发元素，查看补充说明。
正在加载实验室…
使用时关注什么
- 01提示补充标签，不承载唯一的关键说明。
- 02不能只支持鼠标悬停，键盘聚焦也应可见。
✓ 适用场景
- 纯图标按钮需要文字说明
- 文本被截断，需要展示完整内容
- 补充不关键的专业术语或快捷键
✕ 不适用场景
- 信息必须长期可读（改用可见文字或帮助 popover）
- 触屏设备没有 hover（禁用或换 long-press）
- 气泡内含链接、按钮等交互元素（改用 popover）
常见形式
深色气泡
Dark
白字深底，桌面端最常见默认
浅色卡片
Light
带边框与阴影，可承载稍多信息
富提示
Rich
含标题、快捷键或图标，仍不可交互
实现要点
position: absolutepointer-events: nonez-indextransition触发元素 relative，气泡 absolute 按方向偏移；延迟 300~500ms 出现、移开立即消失。 气泡加 pointer-events: none 防止移向气泡时闪烁；同时支持 focus 显示以保证键盘可访问 （aria-describedby）。触屏端提供替代方案或干脆不显示。
平台 API
role="tooltip"aria-describedby代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件相似概念覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件相似概念在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件相似概念容易混淆
Popover 点击出现、可交互；Tooltip 悬停出现、只读。
Toast 是系统反馈、自动消失；Tooltip 解释控件、跟随指针。