Animated Tooltip

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { Info } from "lucide-react";
5import { useState } from "react";
6 
7export function AnimatedTooltip() {
8  const [isVisible, setIsVisible] = useState(false);
9 
10  return (
11    <div className="flex items-center justify-center p-8">
12      <div className="relative">
13        <motion.button
14          onMouseEnter={() => setIsVisible(true)}
15          onMouseLeave={() => setIsVisible(false)}
16          className="flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-[var(--muted-foreground)]"
17          whileHover={{ scale: 1.05 }}
18          whileTap={{ scale: 0.95 }}
19        >
20          <Info className="h-4 w-4" />
21          Hover me
22        </motion.button>
23 
24        <AnimatePresence>
25          {isVisible && (
26            <motion.div
27              initial={{ opacity: 0, y: 10, scale: 0.95, x: "-50%" }}
28              animate={{ opacity: 1, y: 0, scale: 1, x: "-50%" }}
29              exit={{ opacity: 0, y: 10, scale: 0.95, x: "-50%" }}
30              transition={{
31                duration: 0.2,
32                delay: 0.1,
33              }}
34              className="absolute bottom-full left-1/2 mb-2 w-48"
35            >
36              <div className="rounded-lg border  bg-[var(--card-bg)] p-3 shadow-lg">
37                <p className="text-sm text-[var(--foreground)]">
38                  This is a helpful tooltip with smooth animation and delay.
39                </p>
40              </div>
41              <motion.div
42                initial={{ opacity: 0 }}
43                animate={{ opacity: 1 }}
44                className="absolute left-1/2 top-full h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r  bg-[var(--card-bg)]"
45              />
46            </motion.div>
47          )}
48        </AnimatePresence>
49      </div>
50    </div>
51  );
52}