BetaCodophile is currently in active development. Features may change rapidly! 🚀
Back to Tailwind
Tooltip Utility
Generate Tailwind utility classes for tooltips with proper positioning and visibility.
Tooltip Text
React / Tailwind Output
<div className="group relative inline-block">
<button className="px-4 py-2 bg-white/10 rounded-lg text-white hover:bg-white/20 transition-colors">
Hover Me
</button>
{/* Tooltip */}
<div className="absolute z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-full left-1/2 -translate-x-1/2 mb-2">
<div className="w-32 p-2 rounded-lg text-sm text-center bg-gray-900 text-white shadow-xl">
Tooltip Text
{/* Arrow */}
<div className="absolute top-full left-1/2 -translate-x-1/2 border-x-transparent border-b-transparent border-t-[6px] border-t-gray-900"></div>
</div>
</div>
</div>