Animated tooltip

Installation

$ npx shadcn@latest add https://goodui.dev/r/tooltip-animated.json

The file lands in components/goodui/tooltip-animated.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/tooltip-animated works too.

Usage

import { Download, Filter, Printer } from "lucide-react"
import { Button } from "@/components/ui/button"
import { TooltipAnimated, TooltipGroup } from "@/components/goodui/tooltip-animated"

export function BookingsToolbar() {
  return (
    <TooltipGroup delay={450}>
      <div className="flex gap-1 rounded-xl border bg-card p-1">
        <TooltipAnimated content="Show confirmed only">
          <Button variant="ghost" size="icon" aria-label="Filter">
            <Filter />
          </Button>
        </TooltipAnimated>
        <TooltipAnimated content="Print day sheet">
          <Button variant="ghost" size="icon" aria-label="Print">
            <Printer />
          </Button>
        </TooltipAnimated>
        <TooltipAnimated content="Export CSV">
          <Button variant="ghost" size="icon" aria-label="Export CSV">
            <Download />
          </Button>
        </TooltipAnimated>
      </div>
    </TooltipGroup>
  )
}

When to use

Examples

<div className="flex">
  {team.map((m) => (
    <TooltipAnimated
      key={m.name}
      followPointer
      delay={0}
      className="-ms-3 first:ms-0 hover:z-10 focus-within:z-10"
      content={<span className="flex flex-col items-center"><b>{m.name}</b><span className="opacity-70">{m.role}</span></span>}
    >
      <button type="button" className="size-10 rounded-full border-2 border-background bg-muted text-sm font-medium">
        {m.initials}
      </button>
    </TooltipAnimated>
  ))}
</div>

<TooltipAnimated side="bottom" content={<>Next week <kbd className="ms-1 text-[10px]">→</kbd></>}>
  <Button variant="ghost" size="icon" aria-label="Next week"><ChevronRight /></Button>
</TooltipAnimated>

API reference

Accessibility

• •The content is copied into a visually hidden element and linked to the child with aria-describedby (merged with any aria-describedby it already has), so screen readers read it as the trigger's description. That hidden element has role="tooltip".
• •The visible bubble is aria-hidden and pointer-events: none, so it never blocks the pointer or gets read twice.
• •Opens on hover after the delay, at once on keyboard focus, and after a 450 ms long press on touch (then hides after 1.8 s). A mouse press on the trigger hides it.
• •Icon-only triggers still need their own aria-label; the tooltip is a description, not a name.

Motion

• •Enter: the bubble springs out of the trigger's side (stiffness 520, damping 28, mass 0.7) from scale 0.6 and a 6px offset, with its transform origin on that side. Exit: fades and shrinks to 0.9 in 100 ms.
• •Inside a warm TooltipGroup the next tooltip opens without the delay and with a quick 120 ms fade from scale 0.96 instead of the full spring.
• •followPointer (top and bottom sides only) slides the bubble up to 40px toward the pointer and tilts it up to 10° on a spring (stiffness 260, damping 18). It is off on devices without a fine hover pointer.
• •Reduced motion: opacity only, shown and hidden instantly; followPointer is off.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related