Tooltip
Tooltips are GUI user-triggered elements consisting of message boxes with additional and non-essential information about pages or features. These elements appear when the user interacts with items (buttons, icons, images, links) on a page, by hovering over them while on a desktop or tapping on them while on mobile systems. The message inside a tooltip should be brief yet informative. The information included should be contextual, helpful and non-essential while providing that extra ability to communicate and give clarity to a user.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
Usage guidelines
When to use
- To help users understand the meaning or purpose of an icon, button, image or link.
- To add a small amount of additional information to an element.
- To help a user make decisions.
When not to use
- If you need to provide essential information about pages or features that a user needs to fulfil a task.
Writing guidelines
These are very important elements as they give users the extra information they need to better understand a process, an icon or a tool.
Language and grammar:
- Use simple, clear and plain language to help users.
- Use proper grammar for the message to be easily understood. Use a full stop in explanatory tooltips and no period in descriptive tooltips since they are equivalent to a button or a header.
Text length: Don't write more than 2 sentences.
Accessibility guidelines
Design considerations
Color
- Tooltips must have appropriate contrast against the surrounding background. All the predefined background colors comply with accessibility WCAG AA guidelines.
- Don't rely only on color to communicate meaning so make sure the text of the tooltip is self-evident.
Positioning
- Position tooltips so they don't cover or block related content or information.
- Users should have full control of the tooltip interaction regardless of the device.
Specifications
Anatomy
- Pointer: directs user's attention to the source element that triggers the tooltip.
- Copy: Provide a short and simple copy to provide additional information (Caption, 12, Medium)
- Tooltip container (or background): Container color can be dark blue or Zurich white.
Styling
Tooltips are available in light (Zurich white) and a dark theme (Dark blue).
When you choose a tooltip background color, make sure it stands out from the background and complies with accessibility guidelines.
Select a color theme that stands out from the background
Variants and Alignment
Depending on the placement in the content grid, tooltips can open in 6 different directions.
They can be left, center or right aligned. With these options there is always a top and bottom option available.
Select the one that points and aligns to the icon, button, link or image it is triggered from.
Sizes
Tooltips are available in four sizes.
| Size | Dimensions |
|---|---|
| Extra-Small | Height is fixed at 50 px, width can expand. |
| Small | Width is fixed at 160 px. Height can expand. |
| Medium | Width is fixed at 240 px. Height can expand. |
| Large | Width is fixed at 320 px. Height can expand. |
Behavior
Positioning and alignment
The positioning depends on the element that triggered the tooltip. Tooltips can open in 6 different directions. The pointer should always direct to the trigger element.
Tooltips can't be placed alone without an element (button, icon, image or link) that triggers it.
Leave 8 px of spacing from an element (button, icon, image or link) to a tooltip.
Interaction
Tooltips are user-triggered, meaning they appear when the user interacts with elements (buttons, icons, images, links) on a page, by hovering over, focusing on or tapping on them.
The tooltip is activated as long as the mouse remains over the active trigger element. The tooltip deactivates by hovering away or moving focus to another element. The tooltip can also be activated by tapping on an element and deactivated by tapping outside.
Hover, focus or tap
Activated tooltip on hover, focus or tap.
Hover, focus or tap
Activated tooltip on hover, focus or tap.
Usage examples
Descriptive tooltip
- Write names or instructions.
- The text should be 1 to 3 long.
- For interactive icons, use verbs in infinitive.
Explanatory tooltip
- Be as brief as possible
- Write sentences with a period
- Don't write more than 2 sentences.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-tooltip--color | color | Font color |
--z-tooltip--bg | color | Background color |
...