Animate Tooltip

Radix Tooltip with motion entrance, shared slide transitions, and optional cursor follow.

animate-tooltip

0px

Customize

Edit props; preview updates instantly.

Customize

Side

Side Offset

6px

Delay (ms)

150ms

Follow cursor

Props

Props accepted by AnimateTooltip.

Prop	Type	Default	Description
children	ReactElement	—	The trigger — a single React element. AnimateTooltip clones it to attach pointer/focus handlers and a ref.
content	ReactNode	—	The tooltip body.
side	"top" \| "right" \| "bottom" \| "left" \| "auto"	"top"	Which side of the trigger to anchor to. `"auto"` picks the side from where the cursor enters the trigger — top half → top, bottom half → bottom, left/right by dominant axis.
sideOffset	number	6	Pixel gap between the trigger and the tooltip.
align	"start" \| "center" \| "end"	"center"	Alignment along the chosen side.
alignOffset	number	0	Pixel offset along the alignment axis.
delayDuration	number	150	Delay before the first hover opens the tooltip (ms). Forwarded to the auto-wrapped `TooltipProvider`'s `openDelay`.
arrow	boolean	false	Show the small arrow pointing at the trigger.
followCursor	boolean \| "x" \| "y"	false	Let the tooltip drift toward the cursor while it hovers the trigger. `true` follows on both axes; `"x"` or `"y"` constrains to one axis.
className	string	—	Extra class names merged onto the content.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/animate-tooltip.json

Usage

Import the component and drop it into a render.

demo.tsx23 lines

import {
  AnimateTooltip,
  AnimateTooltipGroup,
} from "@/components/lazy-ui/animate-tooltip";

export function Demo() {
  return (
    <AnimateTooltipGroup>
      <div className="flex gap-3">
        <AnimateTooltip content="First tip" side="auto" arrow>
          <button className="rounded bg-white px-3 py-1.5 text-sm text-black">
            One
          </button>
        </AnimateTooltip>
        <AnimateTooltip content="Slides over from One" side="auto" arrow>
          <button className="rounded bg-white px-3 py-1.5 text-sm text-black">
            Two
          </button>
        </AnimateTooltip>
      </div>
    </AnimateTooltipGroup>
  );
}

Credits

Radix TooltipProvider, trigger, portal, and positioning primitives.Motion for ReactShared layout slide and cursor-follow spring.