Animated Tooltip

An accessible, spring-animated tooltip with a customizable pointing arrow. Background, text, and arrow colours are independently configurable, and it follows WAI-ARIA guidance — hover/focus triggers, role="tooltip", aria-describedby, and Escape to dismiss.

UniqueUI CLI

npx uniqueui add animated-tooltip

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/animated-tooltip.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Link trigger

Usage

"use client";
import { AnimatedTooltip } from "@/components/ui/animated-tooltip";

export default function Example() {
  return (
    <AnimatedTooltip content="Copy to clipboard" side="top">
      <button className="rounded-md bg-neutral-800 px-4 py-2 text-sm text-white">
        Copy
      </button>
    </AnimatedTooltip>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactElement`	The trigger element. Must be a single focusable React element (e.g. a button or link).
`content`	`React.ReactNode`	Content rendered inside the tooltip bubble.
`side`	`"top" \| "bottom" \| "left" \| "right"`	Which side of the trigger the tooltip appears on.
`align`	`"start" \| "center" \| "end"`	Alignment along the trigger's edge.
`background`	`string`	Background colour of the tooltip bubble.
`color`	`string`	Text colour inside the tooltip.
`arrowColor`	`string`	Arrow fill colour. Defaults to `background` so it always matches.
`arrow`	`boolean`	Whether to render the pointing arrow.
`arrowSize`	`number`	Arrow edge length in px.
`offset`	`number`	Gap between the trigger and the tooltip in px.
`delay`	`number`	Delay before the tooltip appears, in ms.
`disabled`	`boolean`	Disable the tooltip entirely (the trigger still renders).
`className`	`string`	Extra Tailwind classes merged onto the tooltip bubble.