什么是 Tooltip？

Tooltip，中文常译为“文字提示”或“工具提示”，是一种当用户将光标悬停（或长时间触摸）在某个界面元素（如图标、按钮、链接、图片等）上时，附近出现的一个小型弹出框。它通常包含一段简短的文字，用于解释该元素的功能、名称或提供额外的上下文信息。

核心特征

由用户交互触发：通常由悬停（Hover）或聚焦（Focus）事件触发。

内容简洁：只包含最关键的辅助信息，非常简短。

瞬时出现和消失：随光标出现，随光标离开而消失，不打断用户的主要操作流程。

非模态控件：它的出现不会屏蔽主界面内容，用户无需对其进行操作即可继续。

核心价值

Tooltip 的存在不是为了炫技，而是为了解决实实在在的用户体验问题。

消除界面歧义：面对一个没有文字标签的图标（如齿轮、垃圾桶、感叹号），用户可能会感到困惑。Tooltip 能立即揭示其含义，无需用户盲目点击尝试。

节省屏幕空间：在现代UI设计中，简洁和留白至关重要。Tooltip 允许设计师隐藏次要的说明文字，保持界面清爽，只在用户需要时才显示信息。

提供即时学习支持：对于新用户或不常用的功能，Tooltip 充当了内置的“教练”，降低了学习成本和记忆负担。

增强可访问性（Accessibility）：对于使用屏幕阅读器的用户，良好的 Tooltip 设计可以通过 aria-label 或 aria-describedby 等属性为其提供语音提示，使其理解界面元素。

如何实现一个 Tooltip

实现 Tooltip 有多种方式，从最简单的原生方式到强大的框架组件。

原生 HTML：title 属性
最简单的方式是使用 HTML 的原生 title 属性。

<button title="保存当前文档"></button>

优点：实现简单，无需任何CSS或JavaScript。
缺点：样式不可定制（外观由浏览器/操作系统决定）、显示有延迟、触摸设备上支持不佳。

</style>
.tooltip {
  width: 200px;
  margin: 50px 50%;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* 将提示框放在元素上方 */
  left:-22%;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<div class="tooltip">悬停在我上面
<span class="tooltiptext">我是CSS Tooltip！</span>
</div>

优点：性能好，无JavaScript依赖，可完全自定义样式和动画。
缺点：实现复杂交互（如智能定位、延迟消失）比较困难。

效果展示

JavaScript 库与框架
对于复杂的项目，使用成熟的 JavaScript 库或 UI 框架是最高效、最可靠的方式。

Tippy.js：功能极其强大，被认为是现代 Tooltip 和 Popover 的标杆。支持丰富的动画、多种主题、智能定位（防止溢出屏幕）、交互式内容等。

Popper.js：一个强大的定位引擎，许多 Tooltip 库（包括 Tippy.js）都基于它构建。用于计算弹出元素的最佳位置。

框架内置组件：如 Ant Design、Element UI、Bootstrap、Fluent UI 等都提供了高质量、风格统一的 Tooltip 组件，开箱即用。

设计原则与最佳实践

一个优秀的 Tooltip 应该是“润物细无声”的。遵循以下原则，让它更好地为用户服务：

内容简洁明了
Tooltip 不是展示长篇大论的地方。保持内容在一行或两行内，使用最直白、最精确的语言。

提供有价值的信息

不要用 Tooltip 来说废话（例如，在一个写着“提交”的按钮上提示“点击此按钮提交表单”）。应该用于解释为什么要这么做或如何做，而不是是什么。

设计谦逊
视觉设计：使用与主界面协调但又有足够对比度的样式。通常为深色背景配浅色文字，并带有轻微阴影以凸显层次。

延迟出现：设置一个短暂的延迟（如100-300ms）再显示，可以防止用户在界面上移动鼠标时造成“弹窗风暴”。

平滑动画：使用淡入淡出或微缩放等细微的动画，让出现和消失更自然，不显突兀。

智能定位
Tooltip 应出现在触发元素周围最空旷的位置，避免遮挡重要内容。优先考虑“上（top）”、“下（bottom）”方，其次是“左（left）”、“右（right）”。优秀的库会自动判断以防止溢出视口。

考虑触摸设备
在移动设备上没有“悬停”状态。通常的解决方案是：

长按：作为悬停的替代方式。
点击：点击触发显示，点击其他任何地方消失（类似于非模态对话框）。

务必确保你的 Tooltip 解决方案在触摸设备上得到了良好测试。

无障碍访问
为触发元素添加适当的 ARIA 属性，如 aria-label 或 aria-describedby，以便屏幕阅读器能够读出提示内容。

确保 Tooltip 可以通过键盘焦点触发（通常通过 tabindex 和 :focus 样式），这对于无法使用鼠标的用户至关重要。

适合使用 Tooltip 的场景

• 解释晦涩的图标。
• 解释表单字段的输入要求或格式。
• 显示被截断文本的完整内容（如长文件名）。
• 解释专业术语或缩写。
• 为操作按钮提供更详细的说明（如“此操作无法撤销”）。

应避免使用 Tooltip 的场景

传达关键信息：用户不应通过“探索”来发现关键信息。重要内容应直接展示在页面上。

包含交互式内容：Tooltip 通常会在用户尝试将光标移向它时消失。如果需要用户点击其中的链接或按钮，应该使用 Popover（弹出框） 组件。

显示过长的内容：如果需要段落文字、图片和列表，它就不再是 Tooltip，应考虑使用模态框（Modal）或幻灯片（Slide-out）面板。