Animate Tooltip

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

Customize

Side

Side Offset6px

Delay (ms)150ms

Follow cursor

Arrow

Slide between triggers

Usage

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>
  );
}