Tooltip
A free, accessible tooltip for React and Tailwind CSS with smart edge-aware positioning, hover and keyboard-focus triggers, and a smooth fade animation. Copy, paste, and customize in seconds.
Copy to clipboard
Copy the code
export function Tooltip() {
return (
<span className="group relative inline-block">
<button className="rounded-xl border border-white/15 bg-white/10 px-4 py-2 font-semibold text-white">Hover me</button>
<span className="pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2
whitespace-nowrap rounded-lg border border-white/15 bg-[#15151c] px-2.5 py-1.5 text-xs text-white
opacity-0 transition group-hover:opacity-100">Copy to clipboard</span>
</span>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the tooltip
This tooltip is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.