AI 摘要：文章主张 <Tooltip> （提示框）组件在设计系统中不应独立存在，因为它常被误用，导致可访问性和一致性问题。作者认为应通过更高层级的组件（如带有 title 属性的 <Button>、<IconButton>、<InfoIcon> 等）来统一提示行为。这种做法能确保键盘操作可达性、用户体验一致性，并减少错误使用的可能，是“限制创造力反而带来更好设计”的典型案例。

1. 问题背景：为什么 Tooltip 容易被误用
• Tooltip 在网页中常被视为简单组件，但其实现需兼顾可访问性（Accessibility）与交互性（Interactivity）。
• 很多设计系统提供 <Tooltip> 组件，却被开发者误用或滥用。
• 根因在于这是一个抽象层级过低的组件，不易强制正确实践。

2. 键盘交互问题（Keyboard Interactivity）
• 非交互元素（如纯图标或徽章）包裹 Tooltip，导致使用键盘导航的用户无法触发提示。
• 举例：Material UI 的 <Tooltip> 示例在非交互元素上无法聚焦。
• React Aria 提供更佳方案：不为非交互元素显示 Tooltip，并通过 <Focusable> 组件确保焦点可达。

3. 用户体验一致性（Least Surprise Principle）
• Tooltip 容易出现在不合适的位置，如句中词语或无法预测的界面处。
• 缺乏一致性会让用户预期混乱、有的图标无说明、有的却多余提示。
• 结论：Tooltip 使用应可预测且统一。

4. 替代方案与系统设计（Higher-level Pattern Components）
• 不提供通用 Tooltip，而是通过更高层级组件统一规则：
• <Button> 或 <Link> 增加可选 title 属性。
• <IconButton> 强制要求 title 属性，保证含义明确。
• <InfoIcon> 明确显示“更多信息”图标，内部控制提示逻辑。
• <InfoText> 组件强调文字说明，可聚焦且视觉可区分。
• 通过这些约束可提升一致性与可访问性。

5. “限制反而带来创造力”的思考
• 限制 Tooltip 的使用让团队重新思考信息展示方式。
• 空间不足时，应改进界面而非“藏信息”。
• 设计系统的目标：减少误用、提升用户体验。

tkdodo.eu

Tooltip Components Should Not Exist

A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences.