Animated Tooltip
Tooltip with spring animation and avatar-style stacked display.
Preview
Animated Tooltip
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
User avatars, icon explanations, and contextual help.
Why this component matters
Tooltips provide information on demand without cluttering the base interface. Animation makes them feel polished.
Usage guidance
Use for any icon or abbreviated element that needs explanation. Delay tooltip appearance by 200-300ms to avoid flicker on accidental hovers.
Installation
bash
npx shadcn@latest add @aceternity/animated-tooltipUsage
example.tsxtsx
import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
export default function Example() {
return (
<AnimatedTooltip>
{/* Your content here */}
</AnimatedTooltip>
);
}Source
animated-tooltip.tsx
components/ui/animated-tooltip.tsx