Skip to content
Origami Design System

Tooltips

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.

Refresh to view bounce animation

<>
  <Button
    label="Share"
    type="secondary"
    attributes={{
      id: "demo-o3-tooltip-id",
      "aria-describedby": "demo-o3-tooltip-content",
    }}
  />
  <TooltipOnboarding
    placement="top"
    title="Heading"
    content="Lorem ipsum muta est. Scribere possum quicquid hic volo, et nihil potes de illo."
    targetId="demo-o3-tooltip-id"
    contentId="demo-o3-tooltip-content"
  />
</>;
Open in StoryBook | Open in Figma

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.

Click the info button to toggle the tooltip

<TooltipToggle
  content="Lorem ipsum muta est. Scribere possum quicquid hic volo, et nihil potes de illo."
  placement="top"
/>;
Open in StoryBook | Open in Figma

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