feat: add a new Tooltip component and integrate it into the demo tabs for refresh and copy buttons.

Author: heysolomon

apps/web/src/components/demo-tabs.tsx

@@ -7,6 +7,7 @@ import { motion } from "framer-motion";
 import NextImage from "next/image";
 import { usePlaceholder, PlaceholderImage } from "next-image-placeholder/react";
 import { getPlaceholderAction } from "@/app/actions";
+import { Tooltip } from "@/components/ui/tooltip";
 
 type DemoMode = "blur" | "color" | "client";
 
@@ -41,9 +42,10 @@ export function DemoTabs({
                 const containerRect = containerRef.current.getBoundingClientRect();
                 const activeRect = activeEl.getBoundingClientRect();
 
-                // Calculate relative positions
-                const left = activeRect.left - containerRect.left;
-                const right = containerRect.width - (left + activeRect.width);
+                // Calculate relative positions (accounting for container border + padding)
+                const offset = 3; // 1px border + 2px padding (p-0.5)
+                const left = (activeRect.left - containerRect.left) - offset;
+                const right = (containerRect.width - (activeRect.left - containerRect.left + activeRect.width)) - offset;
 
                 setClipPath(`inset(0 ${right}px 0 ${left}px round 9999px)`);
             }
@@ -228,22 +230,25 @@ export function DemoTabs({
                             </div>
                         </div>
                         <div className="flex items-center gap-1">
-                            <motion.button
-                                onClick={handleRefresh}
-                                animate={{ rotate: isRefreshing ? 360 : 0 }}
-                                transition={{ duration: 0.5, ease: "easeInOut" }}
-                                className="text-neutral-400 hover:text-white transition-colors p-2 hover:bg-neutral-800 rounded-md"
-                                title="Refresh Demo"
-                            >
-                                <RotateCw size={14} />
-                            </motion.button>
-                            <button
-                                onClick={copyCode}
-                                className="text-neutral-400 hover:text-white transition-colors p-2 hover:bg-neutral-800 rounded-md"
-                                title="Copy Code"
-                            >
-                                {copied ? <Check size={14} /> : <Copy size={14} />}
-                            </button>
+                            <Tooltip content="Refresh Demo">
+                                <motion.button
+                                    onClick={handleRefresh}
+                                    animate={{ rotate: isRefreshing ? 360 : 0 }}
+                                    transition={{ duration: 0.5, ease: "easeInOut" }}
+                                    className="text-neutral-400 hover:text-white transition-colors p-2 hover:bg-neutral-800 rounded-md"
+                                >
+                                    <RotateCw size={14} />
+                                </motion.button>
+                            </Tooltip>
+
+                            <Tooltip content="Copy Code">
+                                <button
+                                    onClick={copyCode}
+                                    className="text-neutral-400 hover:text-white transition-colors p-2 hover:bg-neutral-800 rounded-md"
+                                >
+                                    {copied ? <Check size={14} /> : <Copy size={14} />}
+                                </button>
+                            </Tooltip>
                         </div>
                     </div>
                     <div className="flex-1 p-6 overflow-x-auto custom-scrollbar">

apps/web/src/components/ui/tooltip.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function Tooltip({
+    children,
+    content,
+    delay = 0.2
+}: {
+    children: React.ReactNode;
+    content: string;
+    delay?: number;
+}) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+    const handleMouseEnter = () => {
+        const id = setTimeout(() => setIsVisible(true), delay * 1000);
+        setTimeoutId(id);
+    };
+
+    const handleMouseLeave = () => {
+        if (timeoutId) clearTimeout(timeoutId);
+        setIsVisible(false);
+    };
+
+    return (
+        <div
+            className="relative flex items-center justify-center"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onFocus={handleMouseEnter}
+            onBlur={handleMouseLeave}
+        >
+            {children}
+            <AnimatePresence>
+                {isVisible && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 5, scale: 0.9 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 5, scale: 0.9 }}
+                        transition={{ duration: 0.15, ease: "easeOut" }}
+                        className="absolute top-full mt-2 px-2 py-1 bg-neutral-800 text-neutral-200 text-[10px] rounded-md whitespace-nowrap z-50 shadow-xl border border-neutral-700 font-medium"
+                    >
+                        {content}
+                        <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-neutral-800 rotate-45 border-t border-l border-neutral-700" />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}