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

So when I needed to implement Tailwind CSS tooltip 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 Tailwind CSS classes.

.tooltip .tooltip-text {
  visibility: hidden;
  text-align: center;
  padding: 2px 6px;
  position: absolute;
  z-index: 100;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}