Design System

Tooltip

Surfaces

Overview

A visual hint for interactive elements that are only an icon. It has a 1px white edge and an arrow. It contains the name of the control and it only will be visible when on hover or on focus. The text should not be put twice to avoid redundancy announcement in screen readers.

Live example

Usage

It shows on hover and keyboard focus and closes on Escape.
The tooltip itself has aria-hidden="true" because the control should already have an accessible name.

Accessibility

This section is still in progress.

References