Tooltip

This layer component provide supporting information when triggered by hover or focus events. Information should be helpful and concise

Use tooltips to:

Provide brief, supplementary information about an interface element

Explain the purpose of icon-only buttons when space does not allow for visible labels

Offer clarification for technical terms or unfamiliar concepts

Display additional context that enhances understanding but is not required

Do not use tooltips:

For essential information that users need to complete an action, surface this content directly in the interface or use helper text

Within forms — use helper text instead

For interactive content or media, tooltips should contain text only

When the information is long or complex, use visible text or alternative patterns

As a replacement for good information architecture or clear labelling

Composition

Tooltips require an icon button to trigger their display. The icon button can be triggered by:

Hover — Mouse hovering over the icon button

Tap — Tapping the icon button on touch devices

Focus — Keyboard focus on the icon button

The icon button should be positioned close to the content it supports.

Tooltip example on base and inverted surfaces

Tooltips: base surface, inverted surface

Content guidelines

The content of a tooltip is text only, and it should be concise and helpful. The tooltip will expand as the text wraps over multiple lines.

Content best practices:

Keep text to a few sentences maximum (ideally 1-2 sentences)

Use plain, simple language

Avoid jargon or complex explanations

Do not include essential instructions

Width should not exceed the maximum line-length limit