Tooltip

Open in Storybook Open in Figma

Tooltips are small bubbles that pop up on e.g. hover to explain things. The ones in George are almost identical to Bootstrap’s tooltips.

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.

Setup

Tooltips need a bit of JavaScript to work. To quote the bootstrap documentation, Tooltips rely on the 3rd party library Popper for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle[.min].js which contains Popper in order for tooltips to work!

Once included, you initialise a tooltip by running the tooltip() function on every element that should have a tooltip, like so:

jsdocument.querySelector('#myElement').tooltip();

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 attribute:
1. Interactive elements.
2. Elements that have a landmark role (implicit or explicit).
3. Elements that have an explicit widget role applied.
The default Tooltip trigger is an SVG icon with role="img".
Hence, using plain text as a trigger is not accessible, and has been DEPRECATED.
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 functions as a secondary label (and it will be announced as such in assistive technology), as it is complementing the visible content.

Loading demo…

Rich Content

In addition to the plain text shown above, Tooltips may contain rich content. 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…