Tooltip

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

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.

• 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.

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.