Design DocuWare

Guidelines to empower the DocuWare products' inclusivity and accessibility

Tooltips

Tooltip Component

Tooltips help people to get additional information about a user interface elements

Use cases

  • User onboarding

  • Guidance

  • Textual explanation of visual elements

  • Showing concatenated text

Tooltips

Tooltip (also known as Popover) components are short user-triggered guiding messages (floating labels) that provide additional information about a user interface element or feature. Tooltips are used to give more information when space is tight. It must be triggered by both focus and hover events and remains on the screen as long as the trigger has the focus.

Anatomy

Tooltips are made of:
  • Container

  • Label (Title (for UI elements) or Description (for action components) text)

Tooltip can contain:
  • Keyboard shortcuts

  • Additional textual information

Principles

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