浮层
Tooltip
悬停和获得焦点时出现的一句短标签。
什么时候用它
任何读者“需要”的东西都不能只放在这里:触屏摸不到它,扫读的人也看不见它。
示例
default
说明
悬停和聚焦时出现的一句短标签。
触发器上的 asChild 是设计使然:tooltip 不能加一层会吞掉触发器自己的焦点环、或者打断 flex 行的包装。这也意味着子元素必须可聚焦——一个 <div> 触发器拿不到键盘 tooltip,而这个 API 形状让这个故障显而易见,而不是悄无声息。
它不能代替可访问名称。纯图标按钮仍然需要自己的 aria-label;tooltip 只是把那个名字,为用鼠标的视力正常用户再说一遍。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 被 tooltip 描述的那个元素。必须可聚焦。 | |
| content必填 | ReactNode | 提示内容。控制在一个短语内——tooltip 在触屏上够不着,对正在扫读的人也不可见,所以用户**需要**知道的任何东西都应该放在页面上。 | |
| side | ComponentProps<typeof TooltipPrimitive.Content>['side'] | 'top' | — |
| sideOffset | number | 6 | — |
同时接受 Pick<ComponentProps<typeof TooltipPrimitive.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
再导出
TooltipProvider = TooltipPrimitive.Provider在应用外面——或者包住所有 tooltip 的那棵最小子树——包一次。Radix 需要它来在相邻触发器之间共享开合的时机,正是这一点让一排图标按钮不会每悬停一次就闪一个 tooltip。
键盘操作
| 按键 | 作用 |
|---|---|
| Tab | 显示提示——聚焦就会出现,不是只有悬停才行。 |
| Escape | 关掉提示。 |
无障碍
- 在有边界的框里——设备预览、内嵌控制台——用 `<OverlayContainer container={el}>` 包住这棵子树。面板会渲染进那个元素,按它的边界翻转,而不是按视口;框上设的 `dir` 和 `data-density` 也就跟着生效了。
- 触发器用 asChild,所以子元素必须可聚焦——一个 div 触发器就是没有键盘 tooltip,这个 API 形状让它显性而不是无声。
- 它不是无障碍名称。只有图标的按钮仍然需要自己的 aria-label。