A cool tooltip that reveals on hover, follows mouse pointer
Features:
Example Use Cases:
Props:
"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 };
Part of Aceternity UI — browse the full library on 21st.dev.