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