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


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.


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
06/04/20231.2.0Relative pointer added to top and bottom variant.J. de Wit, S. Kaukonen, R. Stillwell
03/15/20231.1.0Background colors changed to be accessible.E. Gunther, S. Kaukonen