Tailwind:HandlingStates
lastmod 2025-03-26created 2025-03-263 edits
Handling Hover, Focus, and Other States
Group
Tooltip example
<div class="group flex relative">
<span class="bg-red-400 text-white px-2 py-1">Button</span>
<span class="group-hover:opacity-100 transition-opacity bg-gray-800 px-1 text-sm text-gray-100 rounded-md absolute left-1/2 -translate-x-1/2 translate-y-full opacity-0 m-4 mx-auto">Tooltip</span>
</div>
If you applied the tw- prefix:
<div className="tw-group ...">
<BiFileEarmarkPdf />
<span className="group-hover:tw-opacity-70 tw-opacity-0 ...">PDF</span>
</div>