Tooltip

A brief and informative context element to clarify the function or usage of a parent.

Cover

Maturity

Beta

FYQ2 target

Beta

Figma component

Repository

Storybook

Overview

Tooltips are the support of a parent element. They aren’t interactive by themselves, and thus, they shouldn’t include any actions or complex data inside.

They emerge floating over the UI when the trigger element—typically a control—is hovered or focused and automatically disappear when the user moves off it to prevent blocking the experience. All temporary on-screen elements are designed with a high-contrast Inverted theme to guide attention more effectively.

They can be positioned on top, bottom, left, and right of the trigger element, as needed.

Related components

How to use

Avoid

⛔️ Avoid long, not wrapping sentences. To prevent that, Tooltips have a max-width defined.

⛔️ Avoid long, not wrapping sentences. To prevent that, Tooltips have a max-width defined.

⛔️ Avoid using them to communicate the release of a new feature. Use Coach marks instead.

⛔️ Avoid using them to communicate the release of a new feature. Use Coach marks instead.

⚠️ Be careful not to abuse them to hide information that should be visible, or could be displayed elsewhere.

⚠️ Be careful not to abuse them to hide information that should be visible, or could be displayed elsewhere.

⛔️ Avoid including associated actions inside. Tooltips are not interactive. Use a Modal Dialog or a Popover instead.

⛔️ Avoid including associated actions inside. Tooltips are not interactive. Use a Modal Dialog or a Popover instead.

⛔️ Avoid extensive descriptions that are longer than two short sentences.

⛔️ Avoid extensive descriptions that are longer than two short sentences.

⛔️ Avoid using periods in nouns, phrases, and short sentences.

⛔️ Avoid using periods in nouns, phrases, and short sentences.

⛔️ Avoid using them to communicate errors or warning messages. Errors communicated in context help people fix them.

⛔️ Avoid using them to communicate errors or warning messages. Errors communicated in context help people fix them.

⛔️ Avoid displaying redundant information.

⛔️ Avoid displaying redundant information.

Consider

✅ Consider using them in controls that have no Label, like the Action Buttons when the IconOnly property is True. Be clear about what the action will perform.

✅ Consider using them in controls that have no Label, like the Action Buttons when the IconOnly property is True. Be clear about what the action will perform.

✅ Consider using them to reinforce meaning on navigation elements with no Label.

✅ Consider using them to reinforce meaning on navigation elements with no Label.

✅ Consider using them when multiple actions are hidden under an Action Button where the IconOnly property is True.

✅ Consider using them when multiple actions are hidden under an Action Button where the IconOnly property is True.

✅ Consider using them to indicate how an interactive control with no Label works and the expected result.

✅ Consider using them to indicate how an interactive control with no Label works and the expected result.

✅ Consider using them to display truncated text.

✅ Consider using them to display truncated text.

✅ Be brief. Make sure that every word you use is necessary to communicate a message.

✅ Be brief. Make sure that every word you use is necessary to communicate a message.


Quality checklist

This component passes the following requirements described in our Component lifecycle.

Maturity

Beta

α · Design tokens

It uses Ariane design tokens.

α · Official assets

It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Target areas

Its interactive target areas are large enough for users to accurately select them, following the Fitts law.

α · Naming agreement

Its name is agreed upon and shared between design and development.

α · Responsive L1

Is responsive to different viewport sizes.

α · User-triggered states

If the component is interactive, all its possible user-triggered interactive states are defined.

β · Responsive L2

The responsive behavior has been reviewed and validated by the team.

β · State properties

All the possible state attributes are defined.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.

RC · Definition agreement

Its naming and properties are audited and aligned in design and code.

RC · Accessible L1

Its accessibility is manually audited, and any significant issues are fixed.

RC · Docs L2

The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.

RC · Storybook

Includes a Storybook playground of the component.

Stable · Stable API

The component and its API remain stable, with no breaking changes for at least one month.

Stable · Adaptive

Supports adaptive design via preference queries.

Stable · Docs L3

Detailed documentation exists for design, content, accessibility, and implementation, including do’s and dont’s.

Stable · Tooling

Tooling (such as linters, codemods, etc.) exists to help with migrations and prevent further use of alternatives.

Anatomy

Anatomy