Animated Tooltip
A dynamic tooltip that tilts and shifts based on cursor movement, enhanced with smooth spring-based enter and exit animations.
Built with Motion to create a subtle parallax effect using hover position for rotation and translation. AnimatePresence manages smooth mounting and unmounting transitions. Ideal for avatars, buttons, and interactive UI triggers where a responsive, playful tooltip enhances the experience.
Install using the shadcn CLI to add a clean, developer-friendly tooltip component to your application.
Preview
Hover over the trigger and move your cursor to see the tooltip tilt and translate in response to pointer movement.
EV
Props
animated-tooltipProps
- children
- Trigger element (hover target).
- content
- Tooltip content (
ReactNode). - className
- Optional class for the tooltip popup.
- wrapperClassName
- Optional class for the trigger wrapper.
- backgroundClassName
- Optional class for the tooltip background (for example
bg-blue-600). Defaults tobg-black.