How to create ToolTip in Tailwind css

below is how you create a tool tip in tailwind css without any external library.

HTML

<div class='has-tooltip'>
  <span class='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8'>Some Nice Tooltip Text</span>
  Custom Position (above)
</div>

CSS

.tooltip {
  @apply invisible absolute;
}

.has-tooltip:hover .tooltip {
  @apply visible z-50;
}

this is how it will look, you can customize as per your need.