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

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