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