Go to Content
Design System
Playroom Storybook
#StandWithUkraine

Tooltip

Open in Storybook Open in Figma

Tooltips are small bubbles that pop up on focus/hover to explain things.

HINT Don’t confuse Tooltip with Hint. Tooltip usually clarifies something, Hint usually promotes a functionality in George.

Rules For Designers
  • Tooltips must not contain essential information, as they are not easily discoverable.
  • Tooltips have a maximum width of 200px.
  • The placement of the Tooltip will be determined automatically. They will be displayed on top, i.e. above the Tooltip trigger, assuming there is enough space available.
Rules For Copywriters
  • Text wraps automatically, due to the maximum width of the Tooltip.
  • Tooltip content must be kept short, ideally one line, but not more than three lines.

Trigger

The trigger is what is always shown visually, it reveals the Tooltip content when hovered.

Rules For Accessibility
  • Only these elements will work as a trigger, as they can handle the aria-labelledby/aria-describedby attribute:
    1. Interactive elements.
    2. Elements that have a landmark role (implicit or explicit).
    3. Elements that have an explicit widget role applied.
  • Hence, using plain text as a trigger is not accessible, and has been DEPRECATED.
  • The default Tooltip trigger is an SVG icon with role="img" and tabindex={0}.
  • The size of the default trigger is quite small, which is why Tooltip comes with an enlargeTrigger prop, which can be used to enlarge the trigger size by 8px in all directions. The prop is designed to be opt-in for any trigger other than the default:
    • In its default AUTO state, the size of the trigger will be enlarged if the default trigger is used.
    • When set to ALWAYS, even custom triggers will be enlarged.
    • When set to NEVER, no enlargement takes place. Use this only if you place a default trigger inside inline text that happens to have other interactive elements (e.g. links) nearby.
  • Using Tooltips on disabled interactive elements should be avoided, as they cannot be accessed with keyboard navigation.
  • In NVDA, the Tooltip content will only be read on focus, but not when using the line by line navigation.

Default (info icon)

If no trigger has been specified, an information icon will be rendered instead. In this case, the Tooltip acts as the primary label, because the icon does not do much on its own.

Loading demo…

Interactive content

In this case, the Tooltip complements the visible content, the type prop (see below) can be adjusted to tweak announcement in a screen reader.

Loading demo…
Rules For Accessibility
  • Tooltip comes with a type prop that defaults to LABEL. It controls the relationship between the trigger and the tooltip content.
    • LABEL: The tooltip content is announced instead of the interactive control’s label.
    • DESCRIPTION: The tooltip content is announced in addition to the interactive control’s label.
    • DECORATION: The tooltip content is not announced at all, so make sure the interactive control’s label is meaningful on its own. This can be useful to prevent redundancy if a control already has a proper label for assistive tech.
  • Whenever the default trigger is used, setting type to something other than LABEL produces meaningless results and should therefore be avoided.
  • The already DEPRECATED ornamental prop exists for legacy reasons: When set, it bypasses type and enforces the DECORATION behaviour.

Rich Content

Tooltips may contain rich content, but you have to make sure that no block-level HTML elements end up inside. So, bold words and Amounts are fine.
On a good day, even a LineBreak might be okay, but be suspicious if someone asks for two consecutive line breaks.

Loading demo…