Tooltips add additional context to other UI elements and appear on mouse hover or keyboard focus.

On this page

On this page


The tooltip component adds a tooltip to add context to interactive elements on the page.

three examples of tooltips on interactive elements


⚠️ Usage Warning ⚠️Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.

Before adding a tooltip, please consider: Is this information essential and necessary? Can the UI be made clearer? Can the information be shown on the page by default? See Tooltip alternatives for more accessible alternatives.

We use aria-label for tooltip contents. However, aria-label replaces the text content of an element in screen readers, so only use Tooltip on elements with no existing text content.

A tooltip may only be used on an element that is interactive such as a button or a link. Even if an element is focusable, a tooltip may only be used if the element does something when it's clicked.

Tooltip alternatives

Most UI cases don't call for tooltips. Learn some alternative methods to use in place of tooltips.

Known accessibility issues

View open accessibility issues related to this component