<div class="relative inline-block group">
<button type="button" class="px-4 py-2 text-xs font-semibold rounded-xl border border-border bg-card text-foreground shadow-2xs hover:bg-muted transition-colors cursor-pointer">
Hover Me
</button>
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:flex flex-col items-center z-50">
<div class="px-2.5 py-1 text-[11px] font-medium text-white bg-zinc-900 dark:bg-zinc-100 dark:text-zinc-900 rounded-lg shadow-md whitespace-nowrap">
Instant Tooltip Information
</div>
<div class="w-2 h-2 bg-zinc-900 dark:bg-zinc-100 rotate-45 -mt-1"></div>
</div>
</div>
import React from "react";
export function Tooltip({ text = "Tooltip details", children }: { text?: string; children?: React.ReactNode }) {
return (
<div className="relative inline-block group">
{children || <button className="px-4 py-2 text-xs rounded-lg border border-border">Hover Me</button>}
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:flex flex-col items-center z-50">
<div className="px-2.5 py-1 text-[11px] font-medium text-white bg-zinc-900 rounded-lg shadow-md whitespace-nowrap">
{text}
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
export interface TooltipProps {
content?: string;
children?: React.ReactNode;
side?: "top" | "bottom";
}
export default function Tooltip({
content = "Copy API token to clipboard",
children,
side = "top",
}: TooltipProps) {
const [isVisible, setIsVisible] = useState(false);
return (
<div
className="relative inline-flex items-center justify-center"
onMouseEnter={() => setIsVisible(true)}
onMouseLeave={() => setIsVisible(false)}
onFocus={() => setIsVisible(true)}
onBlur={() => setIsVisible(false)}
onKeyDown={(e) => {
if (e.key === "Escape") setIsVisible(false);
}}
>
{children || (
<button
type="button"
aria-describedby="tooltip-content"
className="px-4 py-2 text-xs font-semibold rounded-xl border border-border bg-card text-foreground shadow-2xs hover:bg-muted transition-colors cursor-pointer"
>
Hover or Focus Me
</button>
)}
{isVisible && (
<div
id="tooltip-content"
role="tooltip"
className={`absolute ${
side === "top" ? "bottom-full mb-2" : "top-full mt-2"
} left-1/2 -translate-x-1/2 z-50 flex flex-col items-center pointer-events-none animate-in fade-in zoom-in-95 duration-150`}
>
<div className="px-3 py-1.5 text-[11px] font-medium text-zinc-100 bg-zinc-950 dark:bg-zinc-100 dark:text-zinc-950 rounded-lg shadow-xl whitespace-nowrap">
{content}
</div>
<div
className={`w-2 h-2 bg-zinc-950 dark:bg-zinc-100 rotate-45 ${
side === "top" ? "-mt-1" : "-mb-1 order-first"
}`}
/>
</div>
)}
</div>
);
}
"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Info } from "lucide-react";
export default function AnimatedTooltip() {
const [isHovered, setIsHovered] = useState(false);
return (
<div className="relative inline-flex items-center justify-center py-6">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className="flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-xl bg-primary text-primary-foreground shadow-md hover:bg-primary/90 transition-colors"
>
<Info className="h-4 w-4" />
<span>Inspect Metric</span>
</motion.button>
<AnimatePresence>
{isHovered && (
<motion.div
initial={{ opacity: 0, y: 8, scale: 0.92 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 6, scale: 0.92 }}
transition={{ type: "spring", stiffness: 450, damping: 25 }}
className="absolute bottom-full mb-2.5 flex flex-col items-center pointer-events-none z-50"
>
<div className="px-3 py-1.5 text-[11px] font-semibold text-zinc-100 bg-zinc-950 dark:bg-zinc-100 dark:text-zinc-950 rounded-xl shadow-2xl whitespace-nowrap">
Latency: 14ms (99th percentile) ⚡
</div>
<div className="w-2.5 h-2.5 bg-zinc-950 dark:bg-zinc-100 rotate-45 -mt-1" />
</motion.div>
)}
</AnimatePresence>
</div>
);
}