工具提示

添加悬停文本，以定义术语、解释缩略词，或链接到相关页面，同时避免主内容杂乱。

以下情况适合使用工具提示：

• 在行内定义术语，不打断阅读流程
• 解释缩略词，帮助可能不了解它们的读者
• 提供上下文，补充有帮助但非必需的信息
• 链接到相关内容，引导用户执行操作

基本工具提示

将鼠标悬停在 API一组用于让软件应用相互通信的协议。 上，即可查看定义。

<Tooltip tip="A set of protocols for software applications to communicate.">
  API
</Tooltip>

添加标题

在提示文本上方添加标题：

将鼠标悬停在 APIAPI应用程序编程接口：一组用于让软件应用相互通信的协议。 上，即可查看带标题的定义。

<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
  API
</Tooltip>

添加行动号召链接

添加链接，方便用户了解更多信息：

在我们的文档中了解 APIAPI应用程序编程接口：一组用于让软件应用相互通信的协议。Learn more →。

<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols..."
  cta="Learn more"
  href="/components/overview"
>
  API
</Tooltip>

行内使用

工具提示可以与文本一起行内使用。你可以行内解释 HTML超文本标记语言、CSS层叠样式表 或 JSJavaScript 术语。

Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.

工具提示与其他组件的区别

经验法则： 工具提示适合快速定义（1–2 句话）。更长的解释应放在主内容或 Expandable 中。

属性

无障碍

• 工具提示支持键盘访问（按 Tab 聚焦，聚焦时显示）
• 使用 role="tooltip" 为屏幕阅读器提供支持
• 触发文本带有虚线下划线，用于指示其可交互

下一步？