How to create TailwindCSS tooltips

by Csaba Kissi
Published: July 15, 2021
tailwindcss

I prefer to use as little JS as necessary when I build my projects.

So when I needed to implement TailwindCSS tooltips I preferred to do it with CSS only. Thankfully it's pretty easy. You need to wrap both the tooltip and the actual element into the group first.

The tooltip should be hidden by default and activated by the parent hover state. "group-hover:block"

<div class="p-16">
  <div class="group">
    <p>Hoovering over this div will show the tooltip. You can position tooltips using -m and m like -mt-12</p>
    <span class="absolute z-50 hidden px-6 py-2 -mt-16 text-center text-orange-700 bg-yellow-400 border border-orange-500 border-yellow-600 rounded tooltip-text group-hover:block">Hey There!</span>
  </div>

  <div class="group">
    <p class="mt-10">Hover me <span class="absolute z-50 hidden p-3 px-6 py-2 -mt-16 -ml-6 text-center bg-blue-200 rounded tooltip-text group-hover:block">Look at this!</span></p>
  </div>
</div>

This is a pure CSS we transformed into the TailwindCSS classes.

.tooltip .tooltip-text {
  visibility: hidden;
  text-align: center;
  padding: 2px 6px;
  position: absolute;
  z-index: 100;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}
💡 Look at the demo here