跳到正文
GitHub

浮层

Tooltip

悬停和获得焦点时出现的一句短标签。

什么时候用它

任何读者“需要”的东西都不能只放在这里:触屏摸不到它,扫读的人也看不见它。

示例

default

说明

悬停和聚焦时出现的一句短标签。

触发器上的 asChild 是设计使然:tooltip 不能加一层会吞掉触发器自己的焦点环、或者打断 flex 行的包装。这也意味着子元素必须可聚焦——一个 <div> 触发器拿不到键盘 tooltip,而这个 API 形状让这个故障显而易见,而不是悄无声息。

它不能代替可访问名称。纯图标按钮仍然需要自己的 aria-label;tooltip 只是把那个名字,为用鼠标的视力正常用户再说一遍。

属性

Tooltip props
属性类型默认值说明
children必填ReactNode被 tooltip 描述的那个元素。必须可聚焦。
content必填ReactNode提示内容。控制在一个短语内——tooltip 在触屏上够不着,对正在扫读的人也不可见,所以用户**需要**知道的任何东西都应该放在页面上。
sideComponentProps<typeof TooltipPrimitive.Content>['side']'top'
sideOffsetnumber6

同时接受 Pick<ComponentProps<typeof TooltipPrimitive.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

再导出

TooltipProvider = TooltipPrimitive.Provider

在应用外面——或者包住所有 tooltip 的那棵最小子树——包一次。Radix 需要它来在相邻触发器之间共享开合的时机,正是这一点让一排图标按钮不会每悬停一次就闪一个 tooltip。

键盘操作

Tooltip keyboard interactions
按键作用
Tab显示提示——聚焦就会出现,不是只有悬停才行。
Escape关掉提示。

无障碍

  • 在有边界的框里——设备预览、内嵌控制台——用 `<OverlayContainer container={el}>` 包住这棵子树。面板会渲染进那个元素,按它的边界翻转,而不是按视口;框上设的 `dir` 和 `data-density` 也就跟着生效了。
  • 触发器用 asChild,所以子元素必须可聚焦——一个 div 触发器就是没有键盘 tooltip,这个 API 形状让它显性而不是无声。
  • 它不是无障碍名称。只有图标的按钮仍然需要自己的 aria-label。