Tooltip

A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.

followCursor

side

sideOffset

align

alignOffset

"use client"

import * as React from "react"
import { cn } from "cn"
import { Tooltip as TooltipPrimitive } from "@animate-ui/react/primitives/radix-ui"
import { Button } from "@/components/ui/button"

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background",
          className
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] z-50 translate-y-[calc(-50%_-_2px)] bg-foreground fill-foreground" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

export default function TooltipDemo({
  followCursor = false,
  side = "top",
  sideOffset = 0,
  align = "center",
  alignOffset = 0,
}: {
  followCursor?: boolean | "x" | "y"
  side?: "top" | "right" | "bottom" | "left"
  sideOffset?: number
  align?: "start" | "center" | "end"
  alignOffset?: number
}) {
  return (
    <TooltipProvider>
      <Tooltip followCursor={followCursor}>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover</Button>
        </TooltipTrigger>
        <TooltipContent
          side={side}
          sideOffset={sideOffset}
          align={align}
          alignOffset={alignOffset}
        >
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Installation

Install the packages

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

Add the shadcn/ui component

npx shadcn@latest add tooltip

pnpm dlx shadcn@latest add tooltip

yarn dlx shadcn@latest add tooltip

bun x shadcn@latest add tooltip

Animate it

The CLI finds your shadcn/ui components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.

npx @animate-ui/cli@latest animate tooltip

pnpm dlx @animate-ui/cli@latest animate tooltip

yarn dlx @animate-ui/cli@latest animate tooltip

bun x @animate-ui/cli@latest animate tooltip

Usage

Import the primitive from Animate UI instead of Radix UI. Everything else stays the same.

import { Tooltip } from '@animate-ui/react/primitives/radix-ui';

export function BoldButton() {
  return (
    <Tooltip.Provider delayDuration={0}>
      <Tooltip.Root>
        <Tooltip.Trigger aria-label="Bold">B</Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content sideOffset={4}>
            Bold
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

Coming from the @radix-ui/react-tooltip package? Use the subpath: import * as TooltipPrimitive from '@animate-ui/react/primitives/radix-ui/tooltip'.

Animation

The motion of Animate UI v1's Tooltip, starting from 0.7, with a warm-up:

Content grows from 0.7 and fades in, from the trigger (--radix-tooltip-content-transform-origin), on a spring (stiffness 400, damping 29) that overshoots a little before it settles.
It closes the same way: it shrinks back to 0.7 on the same spring while it fades out, then unmounts.
Tooltips warm up: once one is open, moving along a toolbar shows the next one at once, without its entrance, and hides the previous one at once. 300ms after the last one closed, the next one plays its entrance again. shadcn/ui gives each tooltip its own Provider, so the library's own grouping never sees it: Animate UI tracks it across all of its tooltips.
Radix only opens it on hover for mouse-like pointers, and on keyboard focus.
With forceMount (on the Content or the Portal), the closed content stays in the DOM: it plays its exit, then is hidden and inert.
Open from the start (defaultOpen), it plays the same entrance on page load, like v1.
With followCursor on the Root, the content leans towards the pointer while it moves over the trigger, by half its offset from the trigger's center, on a spring (stiffness 200, damping 17): on both axes, or only 'x' or 'y', as in v1. Under reduced motion it follows without the spring.
Under reduced motion, it only fades (no scale).