A hover/focus tooltip that springs in and tilts in 3D as the pointer moves across its trigger element.
"use client";
import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
const team = [
{
name: "Ada Lovelace",
role: "Design Engineer",
initials: "AL",
gradient: "from-indigo-500 to-violet-500",
},
{
name: "Grace Hopper",
role: "Staff Engineer",
initials: "GH",
gradient: "from-rose-500 to-orange-500",
},
{
name: "Alan Turing",
role: "Founder",
initials: "AT",
gradient: "from-emerald-500 to-teal-500",
},
];
export default function AnimatedTooltipDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-background">
<div className="flex">
{team.map((m) => (
<AnimatedTooltip
key={m.name}
className="-ml-3 first:ml-0"
content={
<span className="flex flex-col">
<span className="font-semibold">{m.name}</span>
<span className="text-background/70">{m.role}</span>
</span>
}
>
<span
className={`flex size-12 items-center justify-center rounded-full bg-gradient-to-br ${m.gradient} text-sm font-semibold text-white ring-2 ring-background`}
>
{m.initials}
</span>
</AnimatedTooltip>
))}
</div>
</div>
);
}