Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

Bottom

PreviewCode

<div role="tooltip" class="relative max-w-xs break-words rounded bg-slate-900 px-3 py-2 text-center text-xs font-medium text-white outline-none">
  <svg class="absolute fill-slate-900" width="10" height="10" viewBox="0 0 10 10" style="transform:translate3d(30px,-18px,0)">
    <polygon points="5,5 0,10 10,10">
    </polygon>
  </svg>
  <span>New Project</span>
</div>

Top

PreviewCode

<div role="tooltip" class="relative max-w-xs break-words rounded bg-slate-900 px-3 py-2 text-center text-xs font-medium text-white outline-none">
  <svg class="absolute fill-slate-900" width="10" height="10" viewBox="0 0 10 10" style="transform:translate3d(30px,24px,0)">
    <polygon points="0,0 10,0 5,5">
    </polygon>
  </svg>
  <span>New Project</span>
</div>

Left

PreviewCode

<div role="tooltip" class="relative max-w-xs break-words rounded bg-slate-900 px-3 py-2 text-center text-xs font-medium text-white outline-none">
  <svg class="absolute fill-slate-900" width="10" height="10" viewBox="0 0 10 10" style="transform:translate3d(81px,3px,0)">
    <polygon points="0,0 0,10 5,5">
    </polygon>
  </svg>
  <span>New Project</span>
</div>

Right

PreviewCode

<div role="tooltip" class="relative max-w-xs break-words rounded bg-slate-900 px-3 py-2 text-center text-xs font-medium text-white outline-none">
  <svg class="absolute fill-slate-900" width="10" height="10" viewBox="0 0 10 10" style="transform:translate3d(-22px,3px,0)">
    <polygon points="10,0 10,10 5,5">
    </polygon>
  </svg>
  <span>New Project</span>
</div>

Without Icon

PreviewCode

<div role="tooltip" class="relative max-w-xs break-words rounded bg-slate-900 px-3 py-2 text-center text-xs font-medium text-white outline-none">
  <span>New Project</span>
</div>