Tooltip

Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.

Best practices

Tooltips are floating containers for displaying additional contextual information for a focused element.

Keep tooltips short and use clear accurate wording.

Use tooltips sparingly. If a UI requires a lot of tooltips, consider revising the interface to provide better explanations and better labelling.

Be consistent with positioning of tooltips in the user interface.

When to use

Use a tooltip when an interactive element requires further explanation, e.g. form elements.

Use to explain the purpose of an icon button.

Use a tooltip to provide non-vital information, such as UI shortcuts.

Use tooltips to provide additional information, when space for additional help text is limited.

Always consider if hiding information in a tooltip is the best approach.

When not to use

Don’t use tooltips for information that is important for the user to accomplish their task.

Don’t use interactive elements, such as links or buttons, inside a tooltip. Interactive elements in tooltips are inaccessible for some users and are hard to use for all users since tooltips do not receive focus. If images, buttons, or links are needed, use the Toggletip component that allows for better tabbing and focus structure, improving the experience for all users.

Don’t use tooltips when there is room available to provide a visible explanation such as a helper text or an Alert box.

Example of when to use a tooltip and when to not

✅ Do	🛑 Don’t
Use helper text for important information.	Don’t use tooltips for information that is important for the user to accomplish their task

Anatomy

Listing all the separate elements of the tooltip

Trigger UI element: The element that triggers the tooltip on hover or focus.

Tooltip text

Behaviour

Tooltips are triggered either by hovering or giving focus to a trigger element. Dismissing tooltips happens when unhovering or onfocusing the trigger element.

Placement

Tooltips and Toggletips have 12 placement options:

Illustrating the twelve different positions a tooltip can have relative to an object

Content guidelines

Tooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.

Touch screens

Keep in mind that on cursor devices the tooltip is shown and hidden on mouse-in and -out.

As there is no cursor on touch devices, the tooltips should be displayed by a first tap and hidden again by a second tap.

Visualising the do's and dont's of the placement of a tooltip

✅ Do	🛑 Don’t
Do make sure tooltips are placed clearly and fully within view.	Don’t keep placement the same as on larger devices if it means information is obscured or outside of view.