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
A classic example of a tooltip is when you hover over a button, and after a short delay, a 👉 text explaining its functions appears.
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 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.
According to the general classification, we would categorize rich tooltips as popovers.
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 ✅.
Last updated