1import React, { useState } from "react";
2    
3    type TooltipPosition = "top" | "right" | "bottom" | "left";
4    type TooltipVariant = "dark" | "light" | "info" | "success" | "danger";
5    
6    interface TooltipProps {
7      label: string;
8      position?: TooltipPosition;
9      variant?: TooltipVariant;
10      children: React.ReactNode;
11    }
12    
13    const Tooltip: React.FC<TooltipProps> = ({
14      label,
15      position = "top",
16      variant = "dark",
17      children,
18    }) => {
19      const [visible, setVisible] = useState(false);
20    
21      const positionClasses = {
22        top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
23        right: "left-full top-1/2 -translate-y-1/2 ml-2",
24        bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
25        left: "right-full top-1/2 -translate-y-1/2 mr-2",
26      };
27    
28      const variantClasses = {
29        dark: "bg-black text-white",
30        light: "bg-white text-black border border-gray-300",
31        info: "bg-sky-600 text-white",
32        success: "bg-emerald-600 text-white",
33        danger: "bg-rose-600 text-white",
34      };
35    
36      return (
37        <div
38          className="relative inline-block"
39          onMouseEnter={() => setVisible(true)}
40          onMouseLeave={() => setVisible(false)}
41        >
42          {children}
43          <div
44            className={`absolute z-20 px-3 py-2 text-sm rounded-lg shadow-lg whitespace-nowrap transition-all duration-300 ${
45              visible
46                ? "opacity-100 scale-100"
47                : "opacity-0 scale-90 pointer-events-none"
48            } ${positionClasses[position]} ${variantClasses[variant]}`}
49          >
50            {label}
51            <div
52              className={`absolute w-2 h-2 rotate-45 ${variantClasses[variant]} ${
53                position === "top"
54                  ? "top-full left-1/2 -translate-x-1/2"
55                  : position === "right"
56                  ? "right-full top-1/2 -translate-y-1/2"
57                  : position === "bottom"
58                  ? "bottom-full left-1/2 -translate-x-1/2"
59                  : "left-full top-1/2 -translate-y-1/2"
60              }`}
61            ></div>
62          </div>
63        </div>
64      );
65    };
66    
67    return function AmazingTooltips() {
68      return (
69        <section className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-gray-900 to-black text-white px-4">
70          <h2 className="text-3xl md:text-4xl font-bold mb-10">
71            Amazing Tooltips Showcase
72          </h2>
73    
74          <div className="flex flex-wrap justify-center gap-10">
75            <Tooltip label="This is a dark tooltip" position="top" variant="dark">
76              <button className="px-5 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg">
77                Hover Me (Dark)
78              </button>
79            </Tooltip>
80    
81            <Tooltip label="Bright and clear" position="bottom" variant="light">
82              <button className="px-5 py-3 bg-white text-black rounded-lg border border-gray-300 hover:bg-gray-100">
83                Hover Me (Light)
84              </button>
85            </Tooltip>
86    
87            <Tooltip label="Informational tip!" position="right" variant="info">
88              <button className="px-5 py-3 bg-sky-600 hover:bg-sky-700 rounded-lg">
89                Hover Me (Info)
90              </button>
91            </Tooltip>
92    
93            <Tooltip label="Success tooltip" position="left" variant="success">
94              <button className="px-5 py-3 bg-emerald-600 hover:bg-emerald-700 rounded-lg">
95                Hover Me (Success)
96              </button>
97            </Tooltip>
98    
99            <Tooltip label="Error tooltip" position="top" variant="danger">
100              <button className="px-5 py-3 bg-rose-600 hover:bg-rose-700 rounded-lg">
101                Hover Me (Danger)
102              </button>
103            </Tooltip>
104          </div>
105    
106          <style jsx>{`
107            .tooltip-enter {
108              opacity: 0;
109              transform: scale(0.95);
110            }
111            .tooltip-enter-active {
112              opacity: 1;
113              transform: scale(1);
114              transition: all 0.2s ease-out;
115            }
116            .tooltip-exit {
117              opacity: 1;
118              transform: scale(1);
119            }
120            .tooltip-exit-active {
121              opacity: 0;
122              transform: scale(0.95);
123              transition: all 0.2s ease-in;
124            }
125          `}</style>
126        </section>
127      );
128    }
129