Tooltip

A tooltip is a popup that displays information related to an element when the mouse hovers over it. It after a small delay and disappears on the mouse out.

toprightbottomleft

Variations

Base Sized Tooltip

The base size tooltip uses bigger text and internal padding.

Copy as:HTMLReact

topcopydone

rightcopydone

bottomcopydone

leftcopydone

<!-- Component: Top base sized tooltip -->
<span class="relative overflow-hidden cursor-pointer group hover:overflow-visible focus-visible:outline-none" aria-describedby="tooltip-01">
  <!-- Tooltip trigger -->
  top
  <!-- End Tooltip trigger -->
  <span role="tooltip" id="tooltip-01" class="invisible absolute bottom-full left-1/2 z-10 mb-2 w-48 -translate-x-1/2 rounded bg-slate-700 p-4 text-sm text-white opacity-0 transition-all before:invisible before:absolute before:left-1/2 before:top-full before:z-10 before:mb-2 before:-ml-2 before:border-x-8 before:border-t-8 before:border-x-transparent before:border-t-slate-700 before:opacity-0 before:transition-all before:content-[''] group-hover:visible group-hover:block group-hover:opacity-100 group-hover:before:visible group-hover:before:opacity-100">Thanks for hovering! I'm a tooltip</span>
</span>
<!-- End Top base sized tooltip -->

Small Sized Tooltip

The small size tooltip uses smaller text and internal padding.

Copy as:HTMLReact

topcopydone

rightcopydone

bottomcopydone

leftcopydone

<!-- Component: Top sm sized tooltip -->
<span class="relative overflow-hidden cursor-pointer group hover:overflow-visible focus-visible:outline-none" aria-describedby="tooltip-05">
  <!-- Tooltip trigger -->
  top
  <!-- End Tooltip trigger -->
  <span role="tooltip" id="tooltip-05" class="invisible absolute bottom-full left-1/2 z-10 mb-2 w-48 -translate-x-1/2 rounded bg-slate-700 p-2 text-xs text-white opacity-0 transition-all before:invisible before:absolute before:left-1/2 before:top-full before:z-10 before:mb-2 before:-ml-1 before:border-x-4 before:border-t-4 before:border-x-transparent before:border-t-slate-700 before:opacity-0 before:transition-all before:content-[''] group-hover:visible group-hover:block group-hover:opacity-100 group-hover:before:visible group-hover:before:opacity-100">Thanks for hovering! I'm a tooltip</span>
</span>
<!-- End Top sm sized tooltip -->

Usage

When visible, tooltips display a text label identifying an element, such as a description of its function. A tooltip is displayed upon hovering (on desktop) or tapping the screen (mobile) on the element or component.

Specs

Tooltip can be visible in all four directions: top,right, bottom and left. It comes in two sizes, base and small with differences in font size and internal padding.

base: font-size 0.875rem (14px) and padding 1rem (16px).
sm: font-size 0.75rem (12px) and padding 0.5rem (8px).

Accessibility notes

A tooltip should have the arial role ofrole="tooltip"and a unique id.
The element that triggers the tooltip should have the aria-describedby="id" attribute point to the tooltip's id.