JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">
<div class="p-10 h-screen bg-gray-200 space-y-6">

<div class='has-tooltip'>
  <span class='tooltip'>Some Nice Tooltip Text</span>
  No style
</div>

<div class='has-tooltip'>
  <span class='tooltip rounded shadow-lg p-1 bg-red-600'>Some Nice Tooltip Text</span>
  No style
</div>

<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>

<div class='has-tooltip'>
  <span class='tooltip p-1 rounded bg-red-500 sm:bg-yellow-400 md:bg-blue-500 lg:bg-green-700'>Some Nice Tooltip Text</span>
  Different depending on device
</div>

</div>

CSS

.tooltip{
  visibility: hidden;
  position: absolute;
}
.has-tooltip:hover .tooltip {
  visibility: visible;
  z-index: 100;
}