A tooltip allows you to display further informations to the user when needed. It can also be used to explicitely specify a visual element like an icon.
Please follow these simple rules when using tooltips:
- tooltips must be used near the highlighted content
- tooltip text must be short (1 or 2 lines maximum)
This kind of tooltip is displayed when the user needs a little more information, to understand an icon for example. It is generally triggered with an informative icon placed near a text element.
Text tooltip are additional content used to define an unclear term.
We provide four tooltip positions to suit your needs at best:
Tooltips can appear in several ways depending on the context and the device it is displayed on. You can have tooltips appearing on hover, on focus and on click.
Read more about spacings in this design documentation page