Tooltip

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.

Usage

Use tooltips:

To display informative text when users hover over an element
To display a text label identifying an element, such as a description of its function
To describe differences between similar elements and distinguish actions with related iconography

A tooltip must be close to the element with which it is associated.

Only use short, descriptive text.

Do not use tooltips:

If the text you want to include is not concise enough. Instead, use a modal.
To restate visible UI text

Color usage

The Cegid Design System includes color usage for tooltip components.

The following color should be used for backgrounds: neutral
The following color should be used for text: white

Types

Basic tooltip (without caret) A tooltip can be used without a caret.

Positioned tooltip (with caret) The positioned tooltip has 12 different placement choices. The placement type defines how the tooltip will be positioned on the screen in relation to its trigger. The caret can be positioned at different points around the container:

Tooltip below an element, and possible caret positions (left, center, right):
Tooltip above an element, and possible caret positions (left, center, right):
Tooltip on the right of an element, and possible caret positions (top, center, bottom):
Tooltip on the left of an element, and possible caret positions (top, center, bottom):

Anatomy and content

A tooltip component is made up of the following elements:

Tooltip container
Tooltip content: used to provide assistive information about an element. The label should be clear and concise.
Caret (optional): used to indicate the relationship between the tooltip and where it was triggered from

Behaviour and interaction