Tooltip

Components

Tooltip

The tooltip displays additional information when hover or click. The information included must be clarifying, useful and not essential.

Preview

Figma

Uses

When to use

When you want to provide additional information or context about a user interface element without interrupting the user's task.

To provide a brief description or explanation of a user interface element, such as an icon or button, or to display a brief description of a menu option or configuration.

When not to use

Avoid using the tooltip component excessively or annoyingly, as this can be frustrating for the user and may disrupt the task you are performing.

Behaviour

Type

Description only

Location

Visualization of the tooltip component positioned above

Top

Top left

Top right

Display of the tooltip component positioned below

Bottom

Display of the tooltip component positioned below on the left

Bottom left

Display of the tooltip component positioned below to the right

Bottom right

Right

Left

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The container element has default role=”button” but can be edited by the developer.

The tooltip element has Aria-Describedby linked through an ID to the pop-up popover element.