Tooltip

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.

Usage

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)

Variations

Icon tooltip

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

Text tooltip are additional content used to define an unclear term.

Behaviors

Directional

We provide four tooltip positions to suit your needs at best:

• Left
• Right
• Top
• Bottom

Appearance

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.

Do's and Don'ts