1/4
Day 02 · Tooltip 悬停提示：鼠标停下来，它才开口
Tooltip 是最安静的提示组件——鼠标悬停时出现、离开即消失，专门解释图标和缩写。本期4张图讲清 Tooltip 的定义、与 Toast/Popover 的核心区别、5种位置变体，以及最关键的一条使用判断标准：只传递一句话的信息量。
2026/6/11 · 9:11
ギャラリー
Day 02 · Tooltip 悬停提示组件
Tooltip 是 UI 里最安静的组件——它从不主动打扰你，只在鼠标停下来问「这是什么」的那一刻，轻声回答一句话，然后随手离开。
图 1：什么是 Tooltip？
鼠标悬停时出现、离开即消失的浮层提示。它不遮挡操作、不需要用户点击关闭，是图标和缩写的「即时翻译机」。
图 2：Tooltip vs Toast vs Popover——怎么区分？
三者最容易混淆，核心差异就在两个维度：触发方式 + 内容量级。Tooltip 由用户悬停触发、内容极简（一句话以内）；Toast 由系统自动弹出、传递操作结果；Popover 由点击触发、可承载更丰富的操作和内容。
图 3：5 种位置变体
Tooltip 可以出现在目标元素的上/下/左/右任意方向，以及跟随鼠标移动的 Follow 模式。默认触发方式是 Hover（鼠标悬停），键盘用户用 Focus 触发——无障碍设计必须同时支持这两种。
图 4：何时用，何时不用
- ✅ 图标按钮缺文字说明、专业缩写需要解释、输入框需要格式提示
- ❌ 移动端（没有 hover 状态）、需要用户阅读长段内容时、提示内容包含可点击链接时
记住一个判断标准：Tooltip 只传递「一句话」的信息量——超过 1-2 行就该换 Popover。
#UIDesign #UXUI #组件设计 #Tooltip #前端开发 #设计系统
コメント