文字提示Tooltip
你可能会说
鼠标放上去飘出一行小字，解释这个图标是干嘛的。
鼠标悬停或聚焦时浮现的轻量级文字提示气泡。鼠标停在陌生下载图标上可显示“下载报告”。它必须支持鼠标、键盘和触屏；必填规则和错误原因等关键信息不能藏在其中。
先知道
也常被叫作文字提示气泡提示提示标签
你可以这样告诉 AI Agent
给下载图标增加文字提示“下载报告”，鼠标悬停和键盘聚焦都能打开，移开或失焦后关闭。不要把下载格式或错误信息藏进提示里，并验证触屏仍能识别按钮作用。
什么时候用
- 没有文字的图标按钮：说明按钮作用设置
- 截断的长文本：触发后查看完整名称2026-年度产品规划-final-v3-最终版.sketch 2026-年度产品规划-final-v3…
- 专业术语解释：不离开上下文就能看懂利润率采用 EBITDA：息税折旧摊销前利润EBITDA 口径计算
- 表头字段说明：ⓘ 旁边补一句口径任务 从创建到交付的自然日周期 ⓘ登录页6 天
什么时候不用
- 只监听鼠标悬停：键盘和触屏用户打不开提示手机上没有悬停，提示永远出不来
- 提示中需要放链接或按钮：使用 气泡卡片 Popover通知设置 管理偏好 →
- 密集图标都触发提示：多个浮层容易相互遮挡提示提示提示提示提示
- 将必填规则藏在提示中：用户可能提交后才发现邮箱必填
组成结构 · Anatomy
复制链接
⧉
深色小条，只放纯文字
指向触发元素，说明提示与哪个元素关联
支持悬停、键盘聚焦或触屏操作触发
常见变体 · Variants
上方Top
设置⚙
默认方位，上方有空间就优先用它
下方Bottom
★收藏
元素贴近页面顶部时优先向下展示
左侧Left
下载⬇
元素靠右边缘，气泡往左放才不被裁
右侧Right
✎编辑
元素靠左边缘，气泡往右放才不被裁
典型使用场景
工具栏图标按钮
保存到云端
✎⬆⬇⋯
文件名截断
2026-夏季营销方案-final-v3.pptx
📄 2026-夏季营销方案-fin…
术语解释
成交总额：统计周期内全部订单金额之和
本季度 GMV 同比增长 32%，主要由新品贡献。
表头口径说明
转化率 = 下单人数 ÷ 访问人数，按天统计
日期访问量转化率 ⓘ
延伸阅读 · 权威出处
快速练习