工具提示准备就绪 Storybook
工具提示在鼠标悬停或聚焦时显示额外信息。包含的信息应与上下文相关、有帮助且非关键，不影响用户当前任务的完成。信息应简洁明了，为用户提供清晰的说明。
加载中...
在线编辑器
<Tooltip content="This is a tooltip"> <Button>Hover me for Tooltip</Button> </Tooltip>
用法
建议
- 为图标提供支持性解释文本（例如，将“搜索”作为放大镜图标的标签）。
- 提供关于元素预期用途的简洁信息。
- 允许工具提示通过键盘导航触发。
- 使用箭头指示工具提示关联的元素。
- 一致地使用工具提示（例如，所有图标按钮都有工具提示，所有工具提示样式相同）。
- 构建工具提示时使用 ARIA 标签以确保可访问性。
不建议
- 不要将用户完成任务所需的关键信息放在工具提示中。
- 不要重复信息，例如操作按钮的标签，这会造成信息冗余。
- 不要在工具提示中使用交互式组件。
- 不要强制用户关闭工具提示。
变体
| 变体 | 目的 |
|---|---|
| 信息 (即 默认) | 向用户提供上下文相关的支持信息 |
| info-alt | 不确定这是什么 |
| 错误 | 作为内联验证 |
可访问性
- 构建工具提示时使用 ARIA 标签以确保可访问性
- 如果工具提示充当主要标签（例如，用于命名图标按钮的操作），请使用
aria-labelledby。 - 如果工具提示充当支持性标签（例如，用于提供输入框的额外信息），请使用
aria-describedby。 - 工具提示在通过键盘导航触焦或聚焦其触发元素时必须可见。
格式
结构
- 触发器 - 用户与之交互以显示工具提示的 UI 控件。
- 尖角 - 指向触发元素的三角形部分。
- 主体 - 包含工具提示内容的容器。
位置
- 自动：在空间最充足的一侧显示工具提示。
- 自动开始：与触发器的顶部对齐。
- 自动：与触发器的中心对齐。
- 自动结束：与触发器的底部对齐。
- 顶部
- 顶部左侧
- 顶部居中
- 顶部右侧
- 底部
- 底部左侧
- 底部居中
- 底部右侧
- 左侧
- 左侧顶部
- 左侧居中
- 左侧底部
- 右侧
- 右侧顶部
- 右侧居中
- 右侧底部
内容
主要元素
触发器 - 用户与之交互以显示工具提示的 UI 控件 - 标准 信息圆圈图标
尖角 - 指向触发元素的三角形部分。
主体 - 包含工具提示内容的容器。
行为
触发方式
- 图标（通常是信息图标）
- 按钮
- 链接
用户交互
当鼠标悬停或聚焦在 UI 触发器上时，会触发工具提示。只要鼠标停留在活动容器或 UI 触发器上，或焦点位于活动容器或 UI 触发器上，工具提示就会持续显示。将鼠标移开或将焦点移到其他元素上会关闭工具提示。
相关
如果需要交互式元素，请考虑使用切换提示。