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.
- 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.
|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|
Was this page helpful?
Thanks for your feedback!