Animated Tooltip

Component 1.6K

About

A cool tooltip that reveals on hover, follows mouse pointer Features: - Mouse Following: The tooltip moves and rotates with your cursor. - Spring Animation: Enjoy smooth, springy animations for a natural feel. - Hover Effects: Tooltips pop up with fade and scale effects when you hover. - Avatar Display: Circular profile pics with a stylish border. - Gradient Accents: Cool gradient lines add flair to the tooltip. - Group Layout: Stack avatars for a neat overlapping look. - Responsive Images: Next.js Image takes care of loading and optimizing images. Example Use Cases: - Team Member Display: Show team info when you hover. - User Lists: Highlight user details in social features. - Contributor Sections: Feature project contributors. - Member Grids: Showcase community or organization members. Props: - id: A unique identifier. - name: The display name. - designation: The role or title. - image: The avatar image URL.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Tooltip to your project and fits it to your theme.

Code

How Animated Tooltip is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

const people = [
  {
    id: 1,
    name: "John Doe",
    designation: "Software Engineer",
    image:
      "https://cdn.21st.dev/assets/mirror/a0/a0f297cfb100263a0dc47b7d9542979a7407421d89570a236a819a258c87d7ce.jpg",
  },
  {
    id: 2,
    name: "Robert Johnson",
    designation: "Product Manager",
    image:
      "https://cdn.21st.dev/assets/mirror/c0/c00778b4a4cc512c57b4eb4145bc3ec659c588135ad52bd30f8ddc69bc295783.jpg",
  },
  {
    id: 3,
    name: "Jane Smith",
    designation: "Data Scientist",
    image:
      "https://cdn.21st.dev/assets/mirror/34/34706f540eb89d15c32d70a9f03cb11011613531735df1c7507c5ab8a0a754ff.jpg",
  },
  {
    id: 4,
    name: "Emily Davis",
    designation: "UX Designer",
    image:
      "https://cdn.21st.dev/assets/mirror/5a/5a31e02c9bfe5f4eb76ee341eab9226b7b73681c32de6326c72ab3df1179eb8e.jpg",
  },
  {
    id: 5,
    name: "Tyler Durden",
    designation: "Soap Developer",
    image:
      "https://cdn.21st.dev/assets/mirror/3f/3f5007bd7840650ff7b26ed77d762c63db937df3a74010b02d01d5032f0292c9.jpg",
  },
  {
    id: 6,
    name: "Dora",
    designation: "The Explorer",
    image:
      "https://cdn.21st.dev/assets/mirror/7c/7cdc7e21cb38bf1f3485e9371c38c0aa4d8500e63f321f1cdb60fe99bda50235.jpg",
  },
];

function AnimatedTooltipPreview() {
  return (
    <div className="flex flex-row items-center justify-center mb-10 w-full">
      <AnimatedTooltip items={people} />
    </div>
  );
}

export { AnimatedTooltipPreview };