Tooltip
Short message communicating the function or context of a control or object.
Tooltips provide brief, contextual information about a control or element. They appear when users hover over the element with their cursor, or when it receives keyboard focus.
Also known as: Help text, hint, info tip, screen tip, TooltipCompat (Android).
Anatomy
A. Label (required): Brief text providing information about a selected control or element.
Usage
| When to use | When not to use |
|---|---|
| To give users supplementary details or context about a control or element. | For important information that needs to always be visible to users. |
Best practices
- Ensure tooltips provide relevant and helpful information that’s directly related to the element they’re associated with.
- Ensure tooltips are easily noticeable but don’t obscure their associated element or other important information.
- Ensure users can easily dismiss tooltips, especially if they hover over them accidentally. Tooltips should disappear when the user moves the cursor away or removes focus.
Do Add tooltips sparingly and only when they add more valuable context for the user.
Don't Use tooltips for important information that needs to be consistently visible or easily discoverable.
Do Keep the content of the tooltip concise and relevant.
Don't Host interactive components, like buttons, within tooltips.
Behaviors
Paired component examples
Icon button
Include tooltips in icon buttons that aren’t labeled on screen, or when they may be hard to identify.
Note: Tooltips aren’t equivalent to image alt text. Reference Acessible text to learn more.
Sliders
Show tooltips with the value when the user interacts with a slider.
Table header tooltips
Provide tooltips for category headers if needed to add additional context for the user.
Displaying content animation
When the mouse hovers over an element, the tooltip may appear with a delay of up to 500 milliseconds (0.5 seconds). Once the mouse moves away, the tooltip will disappear. When an element receives keyboard focus, the tooltip will immediately be displayed with the associated element, and it will disappear once the keyboard focus moves away.
| Appear delay (hover) | Appear delay (keyboard) | Disappear delay |
|---|---|---|
| Up to 500ms | None | None |
Placement
The recommended placement for tooltips is two pixels from the clickable area, center aligned from the top, bottom, left, or right side of the interactive element. Tooltip placement can be programmatically determined based on the position of the element on the screen to ensure it’s always visible.
Content
- Write all content in sentence case, except for acronyms or proper nouns.
- Don’t use punctuation for tooltips.
- Use abbreviations only when commonly understood.
- Limit labels to a few brief words.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing.
