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 Esc 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.