Skip to content 
Hover me
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.
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 |
Both background color and text color can be customized using the --z-tooltip--bg and --z-tooltip--color CSS variables.
Hover me