Velora UI

Animated Tooltip

Avatar row with springy name tooltips on hover.

  • 1.2 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

Maya Chen, Design engineer
Tom Okafor, Frontend lead
Sofia Lindqvist, Indie hacker
Dan Romero, CTO

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/animated-tooltip.json

Adds components/velora/animated-tooltip.tsx, installs motion.

Props

PropTypeDefault
items*TooltipItem[]—
classNamestring—

TooltipItem

interface TooltipItem {
  name: string;
  role?: string;
}

Accessibility

Reduced motion
The tooltip appears and disappears instantly instead of springing in, and the avatar's hover scale no longer transitions.
Keyboard
Each avatar is focusable with Tab and shows its tooltip and a focus ring while focused; Escape hides the tooltip.
Screen readers
Each avatar is read as its name and role from visually hidden text; the visual tooltip and initials are aria-hidden.