Tooltip

Tooltip 用于给按钮、图标、快捷操作等元素提供轻量说明。组件基于 Radix Tooltip 封装，提供内容浮层、箭头、位置、尺寸和 slot class 配置。

import { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@skyroc/web-ui';

何时使用

• 需要解释图标按钮、短标签、快捷操作等界面元素的含义。
• 信息足够简短，不需要用户在浮层内进行交互。
• 需要在 hover 或 focus 时展示辅助说明。
• 需要承载复杂内容或可交互操作时使用 Popover；需要展示对象预览时使用 HoverCard。

基础用法

通过 content 设置提示内容。Tooltip 会把子元素作为触发器，内部使用 TooltipTrigger asChild 渲染。

<Tooltip content="Save your changes">
  <Button>Hover me</Button>
</Tooltip>

位置

通过 contentProps.side 和 contentProps.align 控制浮层位置。sideOffset 默认是 8，avoidCollisions 默认开启。

<Tooltip
  content="Tooltip content"
  contentProps={{
    align: 'center',
    side: 'top'
  }}
>
  <Button>Top</Button>
</Tooltip>

箭头

通过 showArrow 显示指向触发器的箭头。arrowProps 会传递给内部 TooltipArrow。

<Tooltip showArrow content="Tooltip content">
  <Button>with arrow</Button>
</Tooltip>

尺寸

通过 size 调整内容浮层的字号、内边距和箭头大小。默认尺寸为 md。

自定义样式

通过 classNames.content 控制内容浮层，通过 classNames.arrow 控制箭头。className 当前会作为内容浮层的自定义 class 使用。

<Tooltip
  showArrow
  content="Custom tooltip"
  classNames={{
    arrow: 'fill-primary',
    content: 'border-primary bg-primary text-primary-foreground'
  }}
>
  <Button>Custom</Button>
</Tooltip>

API

Tooltip

高层封装组件。继承 Radix Tooltip Root 属性，并增加 content、内容浮层配置、箭头配置和项目尺寸。

TooltipContent

内容浮层组件。默认通过 Portal 渲染，avoidCollisions 默认为 true，sideOffset 默认为 8。

TooltipArrow

箭头组件，通常通过 Tooltip 的 showArrow 自动渲染。

TooltipProvider / TooltipRoot / TooltipTrigger

这些组件直接从 Radix Tooltip re-export。需要统一延迟、跳过延迟窗口或自定义组合结构时，可以使用这些底层组件。

类型