Tooltip

A tooltip is a small, contextual pop-up that appears when a user hovers over or focuses on an element. It provides brief, supplementary information that helps clarify an element's function or meaning without cluttering the interface.

When to use

Labeling icon-only controls

Use a tooltip to reveal the function of an icon-only button (e.g., a gear icon with a "Settings" tooltip).

Labeling icon-only controls

Use a tooltip to reveal the function of an icon-only button (e.g., a gear icon with a "Settings" tooltip).

Displaying truncated text

Show the full text when a piece of text in the UI has been truncated with an ellipsis.

Displaying truncated text

Show the full text when a piece of text in the UI has been truncated with an ellipsis.

Providing context

Offer short, helpful clarifications for charts, data points, or form fields where a permanent label is not necessary.

Providing context

Offer short, helpful clarifications for charts, data points, or form fields where a permanent label is not necessary.

When to avoid

Critical information

Never place essential information that a user must see to complete their task inside a tooltip. Content should be supplementary.

Critical information

Never place essential information that a user must see to complete their task inside a tooltip. Content should be supplementary.

Interactive content

Avoid placing interactive elements like links, inputs, or buttons inside a tooltip. For interactive pop-ups, use a popover component.

Interactive content

Avoid placing interactive elements like links, inputs, or buttons inside a tooltip. For interactive pop-ups, use a popover component.

Touch devices

Tooltips are primarily a desktop pattern triggered by hover. They are difficult to use on mobile and other touch-based devices. Consider alternative patterns like a bottom sheet or a toggleable info icon for these contexts.

Touch devices

Long content

Keep tooltip text very brief and scannable. If the information is lengthy or complex, it belongs in a more persistent element like a modal or a dedicated section of the page.

Long content

Keep tooltip text very brief and scannable. If the information is lengthy or complex, it belongs in a more persistent element like a modal or a dedicated section of the page.