术语图鉴/UI/UX 设计/工具提示
←→切换Esc返回

工具提示 Tooltip

你可能会说

这个图标悬停时显示解释文字气泡。

鼠标悬停在元素上时出现的小文字气泡,解释这个按钮/图标是干什么的。

鼠标悬停在元素上时出现的小文字气泡,解释这个按钮/图标是干什么的。

也常被叫作Tooltip

生活类比

像博物馆展品旁的小标签——不占空间,凑近看才出现解释文字。

🎮 动手试试

👇 悬停按钮查看提示

选择题选择一个你认为最合适的答案

关于「工具提示」,以下哪个描述最准确?

你可以这样告诉 AI

帮我把工具栏图标都加上 Tooltip:鼠标悬停 0.3 秒后出现说明气泡,移开消失,用纯 CSS 或少量 JS 实现。

容易混淆?这样区分

工具提示 Tooltip≠
轻提示 Toast

工具提示随鼠标悬停出现、移开消失是主动探索;轻提示操作后自动弹出、几秒后自动消失是被动通知。

什么时候用

图标按钮需要解释

当界面中的图标按钮含义不够明确(如仅一个齿轮图标),用 Tooltip 在悬停时显示文字说明,降低用户的认知负担。

和 AI 协作时

想让 AI 加 Tooltip 时,说「图标悬停显示'设置'提示、延迟 0.5 秒出现」,AI 会生成 Tooltip 代码。

什么时候不用

移动端触屏界面

没有鼠标就没有「悬停」概念,移动端用长按弹出菜单或内联标签文字替代 Tooltip 更符合触屏交互习惯。

与纯文本命令行无关

CLI 工具通过 --help 或 man 文档提供说明,Tooltip 是 GUI 概念,在字符界面没有对应物。

组成结构 · Anatomy

1
核心概念Core

鼠标悬停在元素上时出现的小文字气泡,解释这个按钮/图标是干什么的。

2
实际表现In Practice

像博物馆展品旁的小标签——不占空间,凑近看才出现解释文字。

3
与 AI 的关联AI Context

和 AI 沟通时提到「给图标加个 tooltip」,就是鼠标放上去显示说明文字。

典型使用场景

图标悬停提示
告诉 AI「工具栏里每个图标悬停时弹出小气泡说明文字,延迟 300ms 出现,12px 字号浅色背景」
想弄懂概念时
告诉 AI「用大白话给我解释什么是工具提示,举个生活中的例子」

延伸阅读