Animated Tooltip

Avatar row with springy name tooltips on hover.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/animated-tooltip.json

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

Prop	Type	Default
`items*`	`TooltipItem[]`	`—`
`className`	`string`	`—`

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

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.

Avatar row with springy name tooltips on hover.

pnpm dlx shadcn@latest add https://paulkeys.org/r/animated-tooltip.json

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

Prop	Type	Default
`items*`	`TooltipItem[]`	`—`
`className`	`string`	`—`

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

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.