Back to components

Tooltip

Tooltip are meant to be a hint or tip on what a tool or other interaction does.

The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over. Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).

Table of Contents

Edit this section, Opens in new window

Overview

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

Edit this section, Opens in new window

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.
Edit this section, Opens in new window

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.

Edit this section, Opens in new window

Anatomy

tooltip

Style
  1. The fill color is BR 1, BROWN
  2. The text color is BE 5, LIGHTEST BEIGE
Edit this section, Opens in new window
Contact us, Opens in new window