main

components/Tooltip.tsx

@@ -0,0 +1,33 @@
+
+import React, { ReactNode } from 'react';
+
+interface TooltipProps {
+    children: ReactNode;
+    content: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string; // For extra styling on the wrapper
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ children, content, position = 'top', className = '' }) => {
+    const positionClasses = {
+        top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+        bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+        left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+        right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+    };
+
+    return (
+        <div className={`relative group ${className}`}>
+            {children}
+            <div
+                className={`absolute ${positionClasses[position]} z-50 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out`}
+            >
+                <div className="bg-stone-900/95 backdrop-blur-sm text-white text-[10px] font-bold uppercase tracking-widest py-2 px-3 rounded-lg shadow-xl whitespace-nowrap border border-white/10">
+                    {content}
+                    {/* Arrow */}
+                    {/* <div className="absolute w-2 h-2 bg-stone-900 rotate-45 ..."></div> Optional */}
+                </div>
+            </div>
+        </div>
+    );
+};