Skip to main content

Tooltips

Tooltips provide a short description of a page element or control.

Overview

A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when “Escape” is pressed or on mouse out.

Usage

Use when

  • Providing a short description of a page element or control.
  • Describing the action of an icon-only button.
  • Revealing the full text of truncated data.
  • Revealing the purpose of a menu that has a dynamic title.

Don’t use when

  • Providing a description longer than 10 words.
  • Your application exists on mobile devices. There is no hover state to activate the tooltip.
What's changed
Date Version Notes Contributors
06/04/2023 1.2.0 Relative pointer added to top and bottom variant. J. de Wit, S. Kaukonen, R. Stillwell
03/15/2023 1.1.0 Background colors changed to be accessible. E. Gunther, S. Kaukonen