Tooltip · Animate UI

Animate UI 自有的 Tooltip：同一 Provider 下的提示共享一个气泡，在触发器之间滑行，而不是关闭再打开。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

tooltip.tsx

import {
  Tooltip,
  TooltipArrow,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@animate-ui/react/primitives/tooltip';

export function Toolbar() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button aria-label="Bold">B</button>
        </TooltipTrigger>
        <TooltipContent className="rounded-md bg-foreground px-3 py-1.5 text-xs text-background">
          <TooltipArrow className="size-2.5 fill-foreground" />
          <p>Bold</p>
        </TooltipContent>
      </Tooltip>

      <Tooltip side="bottom">
        <TooltipTrigger asChild>
          <button aria-label="Italic">I</button>
        </TooltipTrigger>
        <TooltipContent className="rounded-md bg-foreground px-3 py-1.5 text-xs text-background">
          <TooltipArrow className="size-2.5 fill-foreground" />
          <p>Italic</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

动效

气泡从朝向触发器的位置以 0.7 缩放淡入，弹簧 stiffness 400 / damping 31，约 2% 过冲后落定。
悬停下一个触发器时气泡不关闭，整体滑过去并按新内容改变尺寸；内容交替时旧标签向反方向滑出并进入 6px 模糊。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
children	`React.ReactNode`	`—`
id	`string`	`—`
openDelay	`number`	`0`
closeDelay	`number`	`300`
transition	`Transition`	`{ type: 'spring', stiffness: 400, damping: 31 }`
children	`React.ReactNode`	`—`
side	`"top" \| "bottom" \| "left" \| "right"`	`"top"`
sideOffset	`number`	`10`
align	`"start" \| "center" \| "end"`	`"center"`
alignOffset	`number`	`0`
asChild	`boolean`	`false`
…props	`HTMLMotionProps<'div'>`	`—`
asChild	`boolean`	`false`
…props	`HTMLMotionProps<'div'>`	`—`
withTransition	`boolean`	`true`
…props	`Omit<React.ComponentProps<typeof motion.create(FloatingArrow)>, 'context'>`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。