Tooltip

Usage

When to Use

Use a tooltip if you want to give users contextual help when they hover over a specific component. Tooltips are usually attached to icons but can be attached to other components, too.

When Not to Use

If the contextual help is not triggered by the user, e.g. in the onboarding of your application, use messages instead.

Size

Tooltips are available in two size variants. The 'short' variant is used for messages that consist only of a few words. The “long” variant is used for messages that consist of multiple sentences. If possible, keep your message short.

Content

Use tooltips only for information that is not vital for task completion. Vital information should always be visible to users without them having to interact with the interface.

All icon buttons should have a tooltip attached. This also applies to icons that are universally known, like add or delete. This consistent use of tooltips for all icon buttons will prevent users from getting confused about when a tooltip is attached and when not.

If you want to give contextual help for components that are not icons, add the 'info' icon to the right of the related component. Only attach the tooltip directly to the component if it is not avoidable.

Provide helpful content in your tooltips. Don’t use tooltips for obvious information. If you can’t think of helpful content, don’t use a tooltip.

Don’t restate the label of the component that the tooltip is attached to.

For more information about the correct use of tooltips, check out this article: NNGroup, Tooltip Guidelines