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="">Down-center 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="">Right 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="">Left 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="">Up-center tooltip</p>
</div>