animated-tooltip-demo

1"use client";
2 
3import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
4 
5export default function AnimatedTooltipDemo() {
6  return (
7    <div className="flex flex-wrap items-center justify-center gap-4">
8      {(["top", "bottom", "left", "right"] as const).map((placement) => (
9        <AnimatedTooltip
10          key={placement}
11          content={`Tooltip on ${placement}`}
12          placement={placement}
13          animation="slide"
14        >
15          <button className="rounded-lg border bg-card px-4 py-2 font-medium text-sm capitalize transition-colors hover:bg-accent">
16            {placement}
17          </button>
18        </AnimatedTooltip>
19      ))}
20    </div>
21  );
22}