Domc.Dev
Published on

Simple Tailwind Tooltip - No Javascript Needed

Authors

The easiest tailwind tooltip

Most tailwind tooltips librarys are overkill for simple use cases. Sometimes you just need a simple prompt for the user when they hover on a piece of content. This tooltip is perfect for those situations.

Try it out below and feel free to copy and use in your own projects.

Example

Tooltip Text

The Code

<div class="group relative flex flex-col justify-start">
    <div class="flex flex-wrap items-center">
        Tooltip Text
    </div>

    <div class="absolute top-0 mt-6 flex hidden flex-col items-center group-hover:flex">
        <span class="whitespace-no-wrap relative z-10 rounded-md bg-black p-2 text-[10px] leading-none text-white shadow-lg">
            Text shown on hover
        </span>
    </div>
</div>

If you need something more robust and feature rich, I recommend you try React Popper. Alternatively, you could spice up this tooltip by adding tailwind transition effects.