Tooltip

<!-- Top -->
<div class="relative group">
  <div
    class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-black w-[166px] opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 left-[50%] -translate-y-full -translate-x-[50%]"
    style="transition: opacity 300ms ease-out, z-index 300ms ease-out">
    <span
      class="absolute bg-black w-[14px] h-[6px] -bottom-[5px] right-[50%] rotate-180 translate-x-[50%]"
      style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
    </span>
    It’s a simple tooltip with useful information.
  </div>
  <p class="pt-4px">
    Top tooltip
  </p>
</div>
<!-- Bottom -->
<div class="relative group">
  <div
    class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-black w-[166px] opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 left-[50%] bottom-[0%] translate-y-full -translate-x-[50%]"
    style="transition: opacity 300ms ease-out, z-index 300ms ease-out">
    <span
      class="absolute bg-black w-[14px] h-[6px] -top-[5px] right-[50%] translate-x-[50%]"
      style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
    </span>
    It’s a simple tooltip with useful information.
  </div>
  <p class="pb-4px">
    Bottom tooltip
  </p>
</div>
<!-- Left -->
<div class="relative group">
  <div
    class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-black w-[166px] opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 top-[50%] -left-[7px] -translate-x-full -translate-y-[50%]"
    style="transition: opacity 300ms ease-out, z-index 300ms ease-out">
    <span
      class="absolute bg-black w-[14px] h-[6px] -right-[8px] bottom-[50%] rotate-90 translate-y-[50%]"
      style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
    </span>
    It’s a simple tooltip with useful information.
  </div>
  <p class="ps-4px -ms-4px">
    Left tooltip
  </p>
</div>
<!-- Right -->
<div class="relative group">
  <div
    class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-black w-[166px] opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 top-[50%] -right-[6px] translate-x-full -translate-y-[50%]"
    style="transition: opacity 300ms ease-out, z-index 300ms ease-out">
    <span
      class="absolute bg-black w-[14px] h-[6px] -left-[8px] bottom-[50%] rotate-270 translate-y-[50%]"
      style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
    </span>
    It’s a simple tooltip with useful information.
  </div>
  <p class="pe-4px -me-4px">
    Right tooltip
  </p>
</div>