Tooltip
Tooltip are meant to be a hint or tip on what a tool or other interaction does.
Table of Contents
Edit this section, Opens in new windowOverview
The Tooltip component is a popup that displays text related to an element when the element is focused via the keyboard or on mouse hover. Tooltip follows the WAI-ARIA Tooltip Pattern
Usage
A tooltip provides descriptive or advisory content (i.e. a hint or tip) about a control. This content appears inside of an overlay whenever the control has mouseover or focus.
In desktop software tooltips are most commonly used in relation to toolbar buttons. Web tooltips are more commonly experienced in relation to links, buttons and form controls.
Principles
- First of all, the HTML title attribute is not an accessible tooltip
- Secondly, the tooltip must describe the host element only. Do not create a host element (e.g. a button) purely for the sake of displaying an overlay. If that is your wish, consider the Help/Info Tooltip components instead
- Tooltip must not be applied to static elements.
- Tooltip must not use the
aria-haspopup
attribute. Tooltips are not considered 'popups' in this context - Tooltip should not be more than one sentence. Consider using the Help/Info Tooltip components for longer content
- Tooltip should follow the principal of progressive disclosure - revealing the right information, at the right time
- The tooltip must appear after short delay when host receives focus.
- The tooltip must disappear when focus leaves flyout.
Accessibility
- A tooltip must only be placed on a natively focusable HTML element.
- Do not place tooltips on non-focusable elements, like an icon.
Screenreader
Assistive technology that supports tooltip role will announce the overlay content after a short delay. This delay is configurable in most screen readers.
Reading order must flow directly from host into overlay.
Anatomy
- The fill color is BR 1, BROWN
- The text color is BE 5, LIGHTEST BEIGE