Tailwind Tooltip without JS

Tailwind

Tailwind CSS tooltip without JavaScript. A clean, accessible solution for hover tooltips using utility classes and data attribute.

No JavaSript

Easy to customize

Simple & Smooth

Demo

Hover Me

global.css

put this code in Tailwind global.css

*[data-tooltip] {
    @apply relative  hover:after:opacity-80 hover:after:-translate-y-full active:after:opacity-80 active:after:-translate-y-full
}
*[data-tooltip]::after {
    @apply content-[attr(data-tooltip)] absolute left-1/2 -top-4 -translate-x-1/2 -translate-y-1/2 bg-white py-1.5 px-2 border border-gray-200 rounded shadow opacity-0 transition-all duration-500 pointer-events-none text-center whitespace-pre text-gray-900
}

HTML

add data-tooltip to any element

<div class="bg-gray-800 shadow text-white px-4 py-1 rounded-lg cursor-pointer" data-tooltip="👋 Hello World.">Hover Me</div>

Hey, my name is Zeal. I built this website to share my works. Hope you like them!

Last Update

2025-04-25