Textual explanation of visual elements
Showing concatenated text
Tooltips are made of:
Label (Title (for UI elements) or Description (for action components) text)
Tooltip can contain:
Additional textual information
- Tooltips are secondary in nature, not primary guiding text. Included information should be contextual, helpful, and nonessential while providing extra ability to communicate and give clarity to a user.
- Mission-critical information should always appear on the screen, not tucked away behind a tooltip.
- Tooltips are usually initiated in one of three ways: through a mouse-hover gesture, through a keyboard-hover gesture, or through the touch.
- Tooltips are always paired nearby the element with which they are associated.
- If technically achievable Tooltips should allow users to copy text from them in order to clarify the meaning or make a translation. In this case, hovering on the tooltip can make it available for highlighting text.
- Tooltips should be provided for unlabeled icons. Most icons have some level of ambiguity, which is why it is recommended to use text labels for all icons. If labels can not be provided - the least designers can do is supply users with descriptive tooltips.
- Tooltips should be used consistently for all unlabeled components without a contextual piece of copy, label, or description text. Tooltips should be used in case of doubts.
- Tooltips should only include short, descriptive text. They disappear so they should never contain critical information that a user would absolutely need to proceed, or information without which a user may cause errors.
- Essential information (what users need to fulfill their actions) should be always kept on the screen, not in the tooltip.
- Tooltips should never stop a user (or be a gate) from completing a task or performing an action.