🚧 This website is work in progress 👷
Components
Overlay
Published
Tooltip

Tooltips provide short, contextual information about the function of an interface element, typically appearing on hover or focus.

Tooltips should be used with the Tooltip component to add descriptive text that appears when users hover over or focus on an element.

Usage

When to use

  • Concise Information: Use to offer brief explanations or context for a UI element. Ex. icon descriptions, abbreviations.
  • Additional Details: Utilize when extra information is helpful but not essential. Ex. clarifying a button's purpose.
  • Non-disruptive Support: Employ to assist users without interrupting their workflow, especially for new or complex features.
  • Accessibility Enhancement: Implement for elements where visual cues alone are insufficient to convey purpose, improving accessibility.

When not to use

  • Extensive Content: Avoid when the text is too long or complex, as tooltips are meant for brief descriptions.
  • Critical Information: Do not rely on tooltips for essential instructions or messages, as they might be missed or inaccessible to some users.
  • Interactive Content: Refrain from including links, buttons, or any interactive elements within tooltips.
  • Replacement for Labels: Do not use tooltips as a substitute for proper labeling of UI elements.

Reference

Edit this page

References