Animated Tooltip

Auto-generate your docs

The AnimatedTooltip component provides an elegant, physics-based tooltip that appears on hover with smooth spring animations. It features dynamic rotation and translation effects based on mouse position, creating an engaging micro-interaction powered by Framer Motion.

Installation

npm install @craftdotui/components

Import

import { AnimatedTooltip } from "@craftdotui/components";

Usage

import { AnimatedTooltip } from "@craftdotui/components";
import { Heart } from "lucide-react";

export default function Example() {
  return (
    <AnimatedTooltip label="Favorite">
      <Heart className="w-5 h-5" />
    </AnimatedTooltip>
  );
}

import { AnimatedTooltip } from "@craftdotui/components";
import { Bell } from "lucide-react";

export default function Example() {
  return (
    <AnimatedTooltip 
      label="Notifications" 
      onClick={() => console.log("Clicked!")}
    >
      <Bell className="w-5 h-5" />
    </AnimatedTooltip>
  );
}

import { AnimatedTooltip } from "@craftdotui/components";
import { Settings } from "lucide-react";

export default function Example() {
  return (
    <AnimatedTooltip 
      label="Settings" 
      delay={500}
      className="bg-blue-500 text-white"
    >
      <Settings className="w-5 h-5" />
    </AnimatedTooltip>
  );
}

Props

React.ReactNode

required

The content to display inside the tooltip trigger (typically an icon).

string

required

The text to display in the tooltip when hovering.

() => void

Optional click handler function.

string

Additional CSS classes to apply to the trigger element.

number

default:"100"

Delay in milliseconds before showing the tooltip on hover.

Animation Details

The component uses Framer Motion with sophisticated spring physics:

Spring Configuration

const springConfig = { 
  stiffness: 200, 
  damping: 10 
};

Motion Values

Rotation: Maps mouse position from -25° to 25° based on horizontal movement
Translation: Subtle horizontal shift (-10px to 10px) following cursor
Scale: Hover trigger scales to 1.2x, tap scales to 0.9x

initial={{ opacity: 0, y: 10, scale: 0.75 }}
animate={{ opacity: 1, y: 0, scale: 1.2 }}
exit={{ opacity: 0, y: 10, scale: 0.75 }}

The tooltip automatically positions itself above the trigger and resets when the mouse leaves.

Examples

Icon Grid

import { AnimatedTooltip } from "@craftdotui/components";
import { Heart, Star, Bookmark, Share2 } from "lucide-react";

export default function IconGrid() {
  return (
    <div className="flex gap-4">
      <AnimatedTooltip label="Like">
        <Heart className="w-5 h-5" />
      </AnimatedTooltip>
      <AnimatedTooltip label="Star">
        <Star className="w-5 h-5" />
      </AnimatedTooltip>
      <AnimatedTooltip label="Bookmark">
        <Bookmark className="w-5 h-5" />
      </AnimatedTooltip>
      <AnimatedTooltip label="Share">
        <Share2 className="w-5 h-5" />
      </AnimatedTooltip>
    </div>
  );
}

Custom Styled

import { AnimatedTooltip } from "@craftdotui/components";
import { Zap } from "lucide-react";

export default function CustomStyled() {
  return (
    <AnimatedTooltip 
      label="Upgrade to Pro" 
      className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0"
    >
      <Zap className="w-5 h-5" />
    </AnimatedTooltip>
  );
}

For best results, use with icon components that are sized between 16px and 24px.

Accessibility

Uses semantic HTML with proper ARIA attributes
Keyboard accessible with tap interactions
Respects user motion preferences
Automatic cleanup of timers on unmount

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Animated Tooltip

Installation

Import

Usage

Props

Animation Details

Spring Configuration

Motion Values

Tooltip Animations

Examples

Icon Grid

Custom Styled

Accessibility

​Animated Tooltip

​Installation

​Import

​Usage

​Props

​Animation Details

​Spring Configuration

​Motion Values

​Tooltip Animations

​Examples

​Icon Grid

​Custom Styled

​Accessibility

Animated Tooltip

Installation

Import

Usage

Props

Animation Details

Spring Configuration

Motion Values

Tooltip Animations

Examples

Icon Grid

Custom Styled

Accessibility