你可能会说
这个图标悬停时显示解释文字气泡。
鼠标悬停在元素上时出现的小文字气泡,解释这个按钮/图标是干什么的。
鼠标悬停在元素上时出现的小文字气泡,解释这个按钮/图标是干什么的。
生活类比
像博物馆展品旁的小标签——不占空间,凑近看才出现解释文字。
🎮 动手试试
👇 悬停按钮查看提示
关于「工具提示」,以下哪个描述最准确?
你可以这样告诉 AI
帮我把工具栏图标都加上 Tooltip:鼠标悬停 0.3 秒后出现说明气泡,移开消失,用纯 CSS 或少量 JS 实现。
工具提示随鼠标悬停出现、移开消失是主动探索;轻提示操作后自动弹出、几秒后自动消失是被动通知。
图标按钮需要解释
当界面中的图标按钮含义不够明确(如仅一个齿轮图标),用 Tooltip 在悬停时显示文字说明,降低用户的认知负担。
和 AI 协作时
想让 AI 加 Tooltip 时,说「图标悬停显示'设置'提示、延迟 0.5 秒出现」,AI 会生成 Tooltip 代码。
移动端触屏界面
没有鼠标就没有「悬停」概念,移动端用长按弹出菜单或内联标签文字替代 Tooltip 更符合触屏交互习惯。
与纯文本命令行无关
CLI 工具通过 --help 或 man 文档提供说明,Tooltip 是 GUI 概念,在字符界面没有对应物。
鼠标悬停在元素上时出现的小文字气泡,解释这个按钮/图标是干什么的。
像博物馆展品旁的小标签——不占空间,凑近看才出现解释文字。
和 AI 沟通时提到「给图标加个 tooltip」,就是鼠标放上去显示说明文字。