提示框
鼠标悬停时显示定义和上下文。解释术语、缩写或链接到相关内容，且不让页面变得杂乱。
将鼠标悬停即可添加提示文字，用于解释术语、说明缩写，或链接到相关页面，而不会让主要内容变得杂乱。
以下情况请使用提示框：
- 内联定义术语，不打断阅读节奏
- 解释缩写，帮助可能不了解它们的读者
- 提供上下文，有帮助但并非必需
- 链接到相关内容，附带行动号召
基本工具提示
将鼠标悬停在 APIA set of protocols for software applications to communicate. 上即可查看定义。
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>添加标题
在提示文字上方添加标题：
将鼠标悬停在 APIAPIApplication Programming Interface: a set of protocols for software applications to communicate. 上，即可查看带标题的定义。
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
API
</Tooltip>添加行动号召链接
添加指向更多详情的链接：
在我们的文档中了解 APIsAPIApplication Programming Interface: a set of protocols for software applications to communicate.Learn more →。
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols..."
cta="Learn more"
href="/components/overview"
>
API
</Tooltip>行内使用
提示框可与文本一起内联使用。你可以在行内解释 HTMLHyperText Markup Language、CSSCascading Style Sheets 或 JSJavaScript 等术语。
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.工具提示与其他组件的区别
| 需求 | 组件 |
|---|---|
| 内联定义术语 | Tooltip |
| 详细解释概念 | Expandable 或单独章节 |
| 警示重要事项 | Callout（Note、Warning） |
| 展示上下文代码 | CodeGroup 或行内代码 |
经验法则： 提示框适用于快速定义（1–2 句话）。较长的解释应放在主要内容或 Expandable 中。
属性
鼠标悬停时显示的提示文字。
显示在提示文字上方的文本。
行动号召链接的文字。
行动号召的 URL（与 cta 一起使用时必填）。
触发提示框的文字。
无障碍
- 提示框支持键盘访问（按 Tab 聚焦，聚焦时显示）
- 使用
role="tooltip"供屏幕阅读器识别 - 触发文字带有虚线下划线，以表明可交互