COMPONENT 53 · Overlays & Disclosure

工具提示

Tooltip

也叫Tool TipHint Bubble悬浮提示NSToolTip

悬停或聚焦时显示简短、非交互的补充说明。

Shows brief, non-interactive help on hover or keyboard focus.

ANATOMY & USAGE

结构与使用建议

组成部分

触发元素
短说明
定位箭头

适合使用

图标含义需要补充，但主要界面仍可独立理解时。

不建议使用

内容重要、可交互、很长或只在触摸设备上提供时。

键盘与无障碍

同时响应 hover 与 focus；由 aria-describedby 关联，允许移入提示且 Escape 可关闭。

DESCRIBE IT TO AI

这样告诉编程助手

实现工具提示（Tooltip）：悬停或聚焦时显示简短、非交互的补充说明。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo tooltip-wrap">
  <button type="button" aria-label="查看命令面板说明" aria-describedby="tip">⌘</button>
  <span id="tip" role="tooltip" hidden>打开命令面板</span>
</div>