Tooltip

Tooltip is a transient popover that provides contextual information about an element when a user hovers or focuses.

Overview

Tooltips reveal nonessential information that can help the user understand or identify an element. A tooltip displays supporting text when the user hovers or focuses on the associated trigger element, such as a button or icon.

Anatomy

1. Trigger: Element that displays the tooltip on hover or focus.
2. Tooltip: Popover that displays the text.
3. Label: Text that helps the user understand or identify the element.
4. Arrow: Pointer that associates the tooltip with the trigger.

Demo

Open the component in Figma.

When to use

Use tooltips for these scenarios:

• When no text label is present, like with an icon-only button.
• When you need to distinguish between visually or contextually similar UI.
• When you need to explain rarely used features or features with various interpretations.
• When an element benefits from supplemental information, including disabled controls or non-obvious abbreviations.

When not to use

Find another way to include non-essential text in your UI in these scenarios:

• When users need to interact with the tooltip content. Since tooltips are transient, they should not include links, buttons, or other controls.
• When the content includes rich formatting or imagery.Tooltips provide only simple, textual descriptions. If your content requires formatting or imagery, choose an alternative component to present it.

Behaviors

Placement

Tooltips should be positioned at the top of the trigger element. If there's ample horizontal space, it may appear to the right. Use bottom or left positioning as a fallback if the other two options aren't possible.

When positioning a tooltip, ensure:

• The tooltip is paired with the element being described.
• Placement considers responsive design.
• Placement doesn’t interfere with the visibility of the trigger element or other relevant information.
• The tooltip remains visible, rather than being cropped or disappearing out of the viewport.

States

Hover and focus

• Tooltips display supporting text when the paired element receives hover or focus.
  When hovering over an element with a tooltip, the cursor is determined by the trigger element, not the tooltip.
• Tooltips disappear when the element loses hover or focus. To maintain parity with browsers' native tooltip behavior, they will not disappear otherwise.

Mobile device considerations

Hover and focus are typically unavailable on touchscreen devices because some devices also trigger a click at the same time. This means tooltips can’t be viewed by users of these devices.

When possible, provide inline text that becomes visible on touchscreen devices. Otherwise, a fixed-position fallback is provided for mobile devices

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for tooltip.

Animation

Tooltips are triggered by hovering or focusing on a UI element and have a short delay before animating per ARIA guidelines.

Content guidelines

Tooltips should be used sparingly. If you’re building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.

Label

• All tooltips have a label.
• Text should be contextual, helpful, and nonessential.
• Be short and concise — one sentence maximum.
  If a tooltip is a complete sentence, include a period at the end. If it's a short phrase or icon label, don't add a period to the end.
• Write in sentence case (capitalize the first word and proper nouns only).
• If you have multiple tooltips, for example in a form, try to make the format, length and style parallel/as consistent as possible. This helps users create a mental model and consume the information more easily.
• Don’t repeat text from visible in the UI.
• Don’t include information that the user needs to complete their task because tooltips disappear when the user stops hovering or focusing.
• Don’t include actions or links.

Icon tooltip content

• Describe the icon action or item. For example, Delete or Databases.
• Use only one or two words.

Definition tooltip content

• Defines a term or gives additional secondary context.
• Use one sentence maximum.

Content accessibility

By default, assistive technologies will treat the tooltip label as an accessible description.

If the tooltip is for an icon-only button, include the tooltip with its label in your design.

Figma: Tooltip