A tooltip is a brief, informative message or short description about an element.
Usage
Use tooltips for actionable icons that do not have text labels, such as the icons in a toolbar. A tooltip is visible when the user hovers over the icon.
Don’t use tooltips on the following elements:
- Components. Instead, provide a descriptive label and use inline or signpost help for more information.
- Static images. Instead, use the HTML alt tag to provide information about the image.
- Textual links. Instead, ensure that the link describes its destination and is not truncated.
Don’t rely on tooltips to meet accessibility requirements. Rather, ensure that your underlying content is well-structured for accessibility, for example, by using ARIA roles.
Placement
Choose a tooltip position that ensures the entire tooltip is visible on the screen and the tooltip does not cover an important UI element. By default, the positioning for tooltips is to the top-right of the icon, pointing to its center.
Other positions are:
- Top left
- Bottom right
- Bottom left
- Side left
- Side right
Size
Set a width that accommodates the text string. The default is 240px. Other choices are 72px, 120px, and 360px.
Content
- Use a verb phrase to describe the action represented by the icon; for example, “Edit settings.”
- Use only plain text and be concise. A tooltip can be a sentence fragment.
- If more detailed information is required, use another form of help.
- Use sentence-style capitalization and no ending punctuation.