DocuWare Design

Guidelines to empower the DocuWare products' inclusivity and accessibility

Feedback
Updated on March 15, 2023

Docy

Tooltips

Estimated reading: 3 minutes 321 views

How to use Tooltip components?

Tooltip (also known as Popover) components are transient, short user-triggered guiding messages (floating labels or views) that provide additional information about on-screen content.

Tooltips are used when space is tight or User Interface elements require further clarification. Tooltips can be triggered by hovering over, focusing on, or tapping a control or interactive area and remain visible as long as the trigger is active.

Use cases

  • User onboarding

  • Guidance

  • Textual explanation of visual elements

  • Showing concatenated text

Anatomy

Tooltips are made of:

  1. Container

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

Microcopy

  • Use sentence case capitalization
  • Simple tooltips consist of 1-2 lines (it is recommended to not use no more than 5 words max.).
  • Tooltips must add value. Avoid repetition of visible labels and already available pieces of text.

Example:

  1. The Label – contains Critical information.
  2. The Placeholder – display an example of what the user should enter in the field.
  3. The Tooltip (infobox) – provides guiding information.
Next - Overlays Popover
CONTENTS
Design System Contact Us

Loading Patterns

Engaging users while waiting with Loading Patterns This section will expose the ...

Alerts

Keep users on their toes using Alerts Alert is a messaging tool used to notify u...

Banners

How inform and alert users with Banners ? A banner is a powerful tool for commun...

Bias-Free Language

General guidelines for writing about people without biases

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon