Skip to content
Origami Design System

Tooltips

Do these guidelines differ for your brand? Let us know in #design-system-guild.

There are two kinds of tooltips available:

Onboarding Tooltips

Onboarding Tooltips help for a smoother introduction to new features or functionality.

  • Contain only descriptive unformatted text with an optional title for emphasis.
  • Should provide insights or tips that enhance, but aren’t critical to, user understanding.
  • Appear only once; dismissing them removes them permanently.

Anatomy
  1. Heading (optional): It’s best to omit the tooltip heading as emphasis cannot be portrayed to screen reader users. Employ a heading only for presentational reasons, provided emphasis is not required for understanding.
  2. Text: The main content providing detailed explanation or information.
  3. Close button (×): This button dismisses the tooltip. Once closed, the tooltip should not reappear for the user.
  4. Arrow: A directional arrow that can point towards any side, indicating the source of the information or context.
  5. Container: The encompassing frame that holds the message text and ensures it’s distinct from other UI elements.

Usage Guidelines

Do not obstruct other elements

Ensure onboarding tooltips do not obstruct other interface elements.

✅ Do
❌ Don't
Refrain from using headings

Use headings only for presentational reasons, as emphasis is not provided for screen reader users. When a heading is used ensure: The extra visual emphasis is not required for understanding; and heading copy flows into body copy without duplication.

✅ Do
❌ Don't
Use to highlight new features

Use them to highlight new features or assist with user onboarding.

✅ Do
❌ Don't

Toggle Tooltips

Toggle Tooltips (“Toggletips”) are compact pieces of information designed to offer additional insights when needed.

  • Contain only descriptive text without any formatting.
  • Should provide relevant information that may be helpful, but is not required.
  • Hidden by default.
  • Toggle visibility through user interaction with the information icon.

Anatomy
  1. Trigger: A compact, circular icon marked with an information symbol that activates the toggletip’s visibility.
  2. Text: The main content providing detailed explanation or information.
  3. Arrow: A directional arrow that can point towards any side, indicating the source of the information or context.
  4. Container: The encompassing frame that holds the message text and ensures it’s distinct from other UI elements.

Usage Guidelines

Do not obstruct other elements

Ensure toggletips do not obstruct other interface elements.

✅ Do
❌ Don't
Use only for additional context

Use toggletips to provide additional context, provided it is not essential.

❌ Don't