Tooltip

A tooltip is a floating label that provides explanations for user interface elements or features.

Guidelines

When to use

Clarify icons or elements: Use tooltips to provide additional information about icons or elements that may be unclear to the user.

Provide brief, context-specific information: Tooltips should offer concise and informative text that explains a feature or element without overwhelming the user.

When not to use

Disabled elements: Don’t use tooltips on disabled buttons or elements, as they are not accessible and don't provide meaningful interaction.

Truncated text: Do not rely on tooltips to display truncated text. Instead, adjust the layout or use expandable areas to ensure content is accessible to all users.

Critical information: Important content should always be visible and never hidden in tooltips. Depending on the content, alternative components are banners, expandable sections, and helper messages.

Tooltips provide additional context for UI elements, offering tips in a short text.

Best Practices

Ensure that tooltips only appear when the user pauses over the target element. They should remain visible if the user briefly moves the cursor off and then back onto the target.

Tooltips should disappear when the user scrolls away or shifts focus from the tooltip.

Avoid incorporating links or interactive elements within tooltips, as this approach lacks accessibility and usability.

Tooltips: Used for brief, supplementary information that enhances understanding, such as explaining icons or features. They should disappear when the user moves the cursor away.

Helper text: Used for essential, persistent information that supports the user in completing tasks. This ensures accessibility and is always visible.

Don't

Don't use tooltips to provide essential information, such as something that helps complete tasks.

Use the Helper text to provide persistent and accessible information instead.

Tooltips: Tooltips provide brief, contextual information when a user hovers over an element. They should not contain interactive elements, as they lack support for focus management and accessibility features.

Popovers: Popovers allow for displaying more detailed content and can include additional elements, such as images, buttons, or links. While they may be less discoverable in the layout, they support focus management and are more accessible, offering an enhanced experience when displaying supplementary information.

While popovers are more accessible than tooltips, they should not be the first choice for displaying information. Always evaluate the importance and discoverability of the information and consider alternative designs, like in-page layouts or floating panels.

Don't

Don't add interactive elements within a tooltip. Use concise text only.

For additional interactions or content, use a Popover, as it supports focus management and is more accessible.

Content

Use tooltips when additional information should be provided. By definition, tips are short and should be one longer or two shorter sentences. If the tooltip is short to indicate action, it does not need punctuation. It can be easy to overuse tooltips, so only use them if there is no other way to include that information in the page hierarchy. Critical info or functionality should always appear on the screen, not behind a tooltip icon that can easily be overlooked.

Do

Use tooltips to add context.

Use tooltips to explain icon button actions.

Use tooltips as hints or non-critical information.

Do not

Use tooltips for critical information. Use a helper message instead.

Rely on tooltips to explain functionality.