Tooltip

Usage

Tooltip is a small pop-up box that appears when a user hovers over an element. Tooltip can be used to provide additional information or context about that element. They should only contain supplementary, non-essential information and be used sparingly.

Best practices

Do

Use tooltip only with interactive elements e.g. providing text label for the Icon button.

Don't

Don’t use tooltips on non-interactive elements e.g. text, icons, containers.

Don't

Don’t hide vital information behind tooltips. Try to show content directly on the page e.g., use hints for inputs.

Don't

Don’t use interactive elements inside tooltips e.g. buttons or links. Users can’t interact with a tooltip.

Don't

Don't place long content inside a tooltip. Tooltips should be short and succinct.

Alternatives

Although tooltips may seem like a good solution for providing additional content to users, they are rarely appropriate.

• They are hidden by default, making them easy to miss.
• If they are not used on focusable elements, they cannot be accessed via keyboard, creating accessibility issues.

We recommend finding an alternative approach and considering tooltips as a last resort.

Show content directly on the page

If the content is necessary to finish the task, or vastly benefits the user try to show it directly on the page.

Do

Show information vital to complete the task directly on the page.

Don't

Don’t hide vital information behind tooltips.

Use a different component

Consider different components, e.g. a modal. They give you more flexibility to put necessary content and provide better accessibility.

Do

Use a pattern that is accessible to a larger group of users and allows for better content hierarchy like modals.

Don't

Don’t place rich content inside tooltips.

Use progressive disclosure

Instead of hiding information in the tooltip, provide a clear action to show and hide the content.

Do

Use progressive disclosure to show more content.

Don't

Don’t hide detailed content behind tooltips. It's not a discoverable or user-friendly approach.

If you need help deciding what alternative to use, you can reach out to the Design System Team for assistance.

Examples

Live Preview

Props

Slots