Tool-tip

<div class="tool-tip-position relative group inline-block">
  <div class="absolute bottom-full left-1/2 mb-2 hidden -translate-x-1/2 group-hover:block bg-gray-800 text-white px-2 py-1 rounded whitespace-nowrap">
      Tooltip
      <div class="absolute w-2 h-2 bg-gray-800 rotate-45 left-1/2 -translate-x-1/2 -bottom-1"></div>
  </div>
  <div class="bg-gray-300 py-1 px-2">
      Hover me
  </div>
</div>
<div class="p-8"></div>

<div class="tool-tip-position relative group inline-block">
  <div class="absolute top-full left-1/2 mt-2 hidden group-hover:block -translate-x-1/2 bg-gray-800 text-white px-2 py-1 rounded whitespace-nowrap">
      Tooltip
      <div class="absolute w-2 h-2 bg-gray-800 rotate-45 left-1/2 -translate-x-1/2 -top-1"></div>
  </div>
  <div class="bg-gray-300 py-1 px-2">
      Hover me
  </div>
</div>
<div class="p-8"></div>

<div class="tool-tip-position relative inline-block group">
  <div class="absolute left-full top-1/2 ml-2 hidden group-hover:block -translate-y-1/2 bg-gray-800 text-white px-2 py-1 rounded whitespace-nowrap">
      Right tooltip
      <div class="absolute w-2 h-2 bg-gray-800 rotate-45 -left-1 top-1/2 -translate-y-1/2"></div>
  </div>
  <div class="bg-gray-300 py-1 px-2">Hover me</div>
</div>
<div class="p-8"></div>

<div class="tool-tip-position relative inline-block group">
  <div class="absolute right-full top-1/2 mr-2 hidden group-hover:block -translate-y-1/2 bg-gray-800 text-white px-2 py-1 rounded whitespace-nowrap">
      Left tooltip
      <div class="absolute w-2 h-2 bg-gray-800 rotate-45 -right-1 top-1/2 -translate-y-1/2"></div>
  </div>
  <div class="bg-gray-300 py-1 px-2">Hover me</div>
</div>
<div class="p-8"></div>