Tooltip

Tooltip 是对 @base-ui/react/tooltip 的封装，提供鼠标悬停时显示提示信息的功能。

引入

import {
  Tooltip,
  TooltipProvider,
  TooltipTrigger,
  TooltipContent,
} from "aui-components";

基本用法

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="ghost">Hover me</Button>} />
    <TooltipContent>Tooltip text</TooltipContent>
  </Tooltip>
</TooltipProvider>

子组件

子组件	说明
`TooltipProvider`	提供延迟等全局配置
`Tooltip`	根容器
`TooltipTrigger`	触发提示的元素
`TooltipContent`	提示内容面板

Props

属性	类型	默认值	说明
`defaultOpen`	`enum`	`false`	Whether the tooltip is initially open. To render a controlled tooltip, use the `open` prop instead.
`open`	`enum`	—	Whether the tooltip is currently open.
`onOpenChange`	`enum`	—	Event handler called when the tooltip is opened or closed.
`onOpenChangeComplete`	`enum`	—	Event handler called after any animations complete when the tooltip is opened or closed.
`disableHoverablePopup`	`enum`	`false`	Whether the tooltip contents can be hovered without closing the tooltip.
`trackCursorAxis`	`enum`	`'none'`	Determines which axis the tooltip should track the cursor on.
`actionsRef`	`enum`	—	A ref to imperative actions. - `unmount`: Unmounts the tooltip popup. - `close`: Closes the tooltip imperatively when called.
`disabled`	`enum`	`false`	Whether the tooltip is disabled.
`handle`	`enum`	—	A handle to associate the tooltip with a trigger. If specified, allows external triggers to control the tooltip's open state. Can be created with the Tooltip.createHandle() method.
`children`	`enum`	—	The content of the tooltip. This can be a regular React node or a render function that receives the `payload` of the active trigger.
`triggerId`	`enum`	—	ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `open` prop to create a controlled tooltip. There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set).
`defaultTriggerId`	`enum`	—	ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.

Provider Props

<TooltipProvider
  delay={0} // 提示延迟（毫秒），默认 0
>
  {/* ... */}
</TooltipProvider>

Content Props

<TooltipContent
  side="top" // 弹出方向："top" | "bottom" | "left" | "right"
  sideOffset={4} // 与触发元素的偏移
  align="center" // 对齐方式："center" | "start" | "end"
  alignOffset={0} // 对齐偏移
>
  Tooltip text
</TooltipContent>

不同方向

<TooltipContent side="top">Top tooltip</TooltipContent>
<TooltipContent side="bottom">Bottom tooltip</TooltipContent>
<TooltipContent side="left">Left tooltip</TooltipContent>
<TooltipContent side="right">Right tooltip</TooltipContent>

在组件库中的使用

Tooltip 被 TooltipIconButton 和 Attachment 组件内部使用：

// TooltipIconButton 内部
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button />}>
      <CopyIcon />
      <span className="sr-only">Copy</span>
    </TooltipTrigger>
    <TooltipContent side={side}>{tooltip}</TooltipContent>
  </Tooltip>
</TooltipProvider>

完整示例

<TooltipProvider delay={300}>
  <div className="flex items-center gap-4">
    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="ghost" size="icon">
            <InfoIcon />
          </Button>
        }
      />
      <TooltipContent side="top" sideOffset={8}>
        <p className="max-w-48">This action will update all related records.</p>
      </TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>

Tooltip

引入

基本用法

子组件

Props

Provider Props

Content Props

不同方向

在组件库中的使用

完整示例

相关链接

On this page