Skip to main content

Tooltip

Component
Live

The Tooltip component provides helpful or contextual information on interaction.

FigmaCode

Usage​

The Tooltip component allows users to expose supplementary information when hovered, tapped or focused. Tooltips provide contextual information within a users current page or workflow, eliminating the need for users to disrupt their journey to seek additional details elsewhere.

Tooltips can be attached to any UI element, The position of the Tooltip is adaptable and can be change depending on how close it is to the edge of the screen or other elements.

Install​

yarn add @iag/chroma-react-ui.components

Import​

import { tooltip } from "@iag/chroma-react-ui.components";

When to use​

Use the Tooltip component to present small pieces of supplementary information. It's particularly useful for definitions or brief explanations, where content is short and is not required by all users.

When to avoid​

Avoid using Tooltips for critical or essential information that all users need to see immediately, ensure critical content is visible without interaction. Avoid using Tooltips for form validation errors, as this hides the information a user needs to rectify the issue. Consider using the Message component. Also avoid for long pieces of content, consider the Toggle Content component or creating another content section.

Avoid using Tooltips solely to conceal information within the user interface. Instead of making users hunt for information, guide them to the relevant details without hiding them.

Do

  • Keep content short and concise, using clear and straightforward language.
  • Use Tooltips consistently across the interface to maintain a cohesive user experience.
  • If using an icon, place it after the wording it refers to. This stops it being confused for a Message component which isn’t interactive.
  • Position tooltips so they don’t block related content or important information.
  • Ensure the triggering control is easily recognisable to users.
  • Ensure the triggering control meets the required contrast ratio with the background and surrounding colours.

Don't

  • Use for content that must always be visible or is crucial to the user task.
  • Overuse Tooltips, as they add an extra step for users to access information.
  • Place interactive elements within a tooltip (ie, links and call to actions) as these are not accessible.