iconiq.
iconiq.

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

Usage

Import from @/components/ui/animated-tooltip and wrap any trigger with content for the tooltip.

tsx
import { AnimatedTooltip } from "@/components/ui/animated-tooltip";

<AnimatedTooltip content="Your tooltip text">
  <button type="button">Hover me</button>
</AnimatedTooltip>

Get the Component

Copy the Animated Tooltip component directly into your project or open it in v0 to customize and generate variations. This allows you to quickly integrate the component or experiment with different UI implementations.

Props

  • 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 (e.g. bg-blue-600). Defaults to bg-black