跳到主要内容
Termlib

UI 组件 · 反馈

文字提示

Tooltip

也叫：工具提示、悬停提示、提示气泡、Hint

鼠标悬停或键盘聚焦在某个元素上时，在旁边弹出的一小段深色说明文字，移开即消失。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

给工具栏里只有图标的按钮加文字提示：悬停 300 毫秒后在按钮上方显示深灰底白字说明，如「编辑」「删除」「导出」，字号 12px、带指向按钮的小箭头；键盘聚焦时同样显示，鼠标移开或按 Esc 时消失。靠近屏幕边缘时自动换到另一侧显示。

发给

01判断

你的内容是这样吗？

对照两列，确认文字提示是不是你要找的。

符合这些情况，用文字提示

  • 只有图标没有文字的按钮，需要告诉用户它是做什么的
  • 文字因空间不够被截断成省略号，需要悬停查看完整内容时
  • 表单字段或数据指标旁的问号图标，需要一句简短补充解释时

是这些情况，换成别的

  • 需要放按钮、链接或表单等可交互内容时

    改用气泡卡片

  • 告知操作完成后的结果时

    改用轻提示

  • 用户必须看到的关键信息，手机上无法悬停，不能只放在文字提示里

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    在文字提示里放「查看详情」链接或按钮，鼠标一移过去提示就消失了，根本点不到

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    给本来就写着清楚文字的按钮，再加一个内容完全相同的文字提示

  3. 03

    在提示里塞几段长文字，浮层变成一大块，遮住下面的内容

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由触发元素和悬停时出现的小浮层组成，浮层内是一两句纯文字，并带一个指向触发元素的小箭头。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1某个图标或文字上方或旁边的一小块深色浮层
  2. 2浮层里是一行白色小字，带一个指向目标的三角箭头
  3. 3只在鼠标悬停时出现，截图里常伴随鼠标指针

04解释

详细解释

文字提示是一个很小的浮层，用户把鼠标移到某个元素上或用键盘聚焦时出现，通常是深色底白字，带一个指向目标的小箭头，鼠标移开就消失。它最常用来解释只有图标、没有文字的按钮，比如在铅笔图标上提示「编辑」，或者显示被截断文字的完整内容。

它只放一两句简短的纯文字，不能放按钮、链接、图片这类可交互内容，因为鼠标一移开它就没了，用户点不到。需要放更多内容或操作时，应该用气泡卡片，它由点击触发，内容可以更丰富。

手机上没有悬停，文字提示在触屏上基本看不到，所以关键信息不能只藏在文字提示里。

开发者信息
术语 ID
component-tooltip
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [role="tooltip"]
  • .tooltip
  • .ant-tooltip
  • .el-popper.is-dark
  • [class*="MuiTooltip-tooltip"]
  • .arco-tooltip
  • .t-tooltip
  • [data-slot="tooltip-content"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • tooltip
  • tool-tip
  • tooltip-content
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Tooltip
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30