Overview
Tooltips are floating containers that provide supporting, extra or non essential information to the user.
When to use
- To provide additional supporting information to the user, when space is limited
When not to use
- To present information that requires an action or link after reading
- To present vital information to the user
- To present longer text or information
Anatomy
- Container
- Arrow
- Label
Variants & States
Arrow placement
Depending on where the tooltip should be displayed in relation to its triggering element, the arrow can be positioned in a variety of options.
Positioning
The tooltip is always place with a spacing of 4px in relation to its aimed at element independent of the placement of the tooltip.
Icon
A tooltip can have an optional small icon included in it to support the text visually.
Internationalization
For RTL (right-to-left) languages there are no special adjustments made.
Properties
| Name | Type | Values | Description |
|---|---|---|---|
| icon | String | IconProps |
Controls if and what icon the tooltip has |
| label | String | "" |
The text label of the tooltip |
| arrowPlacement | String | bottom |
Controls where the arrow of the tooltip will be placed |
Usage Guidelines
DoKeep the content simple and short by using only the default provided text styling of the component.
Don’tDon't include additional text elements or stylings or other rich text elements in the tooltip.
DoOnly use the provided out of the box styling of the tooltip
Don’tDon't recolor or change the styling of the tooltip in any other ways.
DoOnly include 16x16 small icons in the tooltip if you need to support the message further visually
Don’tDon't include rescaled assets, photos or illustrations in the tooltip.
Content Guidelines
We use tooltips to explain icons, abbreviations, or less obvious functionalities in a concise way. We never hide essential info in a tooltip.
Voice and tone
We are friendly yet informative.
- For icon-only buttons, we provide a concise one- or two-word description of the button’s function.
- For definitions or instructive tooltips, we use sentence-style capitalization and write complete sentences with punctuation.
- We do not overload tooltips with multiple sentences, lists, or links.
DoNotifications
Don’tNotifications let you track all your VPN events.
Accessibility
- We ensure tooltip text is available to screen readers.
- For icon-only buttons, tooltip text describes the function, not the graphic.
DoNotifications. Button
Don’tBell icon.