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.

topcopydone
rightcopydone
bottomcopydone
leftcopydone

Small Sized Tooltip

The small size tooltip uses smaller text and internal padding.

topcopydone
rightcopydone
bottomcopydone
leftcopydone

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.

Check out the latest release!