Tooltip

Tooltips are used to provide additional information about a specific element on the screen.

Tooltips are usually triggered by hovering over an element or tapping on it. They display contextual information, for example, to explain the purpose of a button.

Characteristics

Tootlips are non-modal, so they don't disrupt the user's flow. They don't use a backdrop and generally disappear when you move the cursor away from the trigger, so it's a 'light dismiss'.

Categorization

Tooltips are in the popovers group.

Examples

Simple

A classic example of a tooltip is when you hover over a button, and after a short delay, a 👉 text explaining its functions appears.

Advanced

A slightly different example would be to 👉 provide more details on hover, like in the case of Asana’s ‘Share’ button, which gives an overview of what sharing settings are currently implemented so that users don’t have to open the sharing dialog.

Tooltips in design systems

Material Design

Material Design differentiates between plain and rich tooltips. Plain tooltips display static information that describes the function of a UI element. Rich tooltips provide detailed context, like describing the value of a feature.

Material Design — Tooltips (Source: https://m3.material.io/)

According to the general classification, we would categorize rich tooltips as popovers.

Polaris by Shopify

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.’ — This aligns with our definition of a tooltip as well ✅.

Polaris by Shopify — Tooltip (Source: https://polaris.shopify.com/)