Skip to content
Primer Design System

Primer Design System

Tooltip

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

On this page

On this page

Usage

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

three examples of tooltips on interactive elements

Accessibility

⚠️ 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.