Tooltips display text when a user clicks on a UI element. Use tooltips to deliver additional information that is not critical for the user (eg., clarifying copy).
- If you have space, don't use tooltips. Just provide clear labels and sufficient body text.
- Keep tooltip text succinct. Do not put essential information in tooltips.
- Always implement a minimum target area of 44px; pair a small icon with body copy to extend target area; retain a buffer around help icon to achieve 44px; do not use tooltip icons as part of inputs or next to text-links.
- Do not add scrolling capabilities to a tooltip (keep content short and focused).
- Do not rely on tooltips; their contents are not easily discovered.
It's important that tooltips have screen reader labels so that it's clear to a user what the purpose of the tooltip is before they open it. If a visible label is provided via the
label prop, this label will be used as the basis of an auto-generated
aria-label for the tooltip trigger and the tooltip itself. For instance, in this example, the auto-generated
aria-label would be "Leading more about NerdWallet rating":
However, we can improve the experience for users using screen readers by providing a more helpful and descriptive label:
Try out the above examples using VoiceOver to see the difference.
boolean | Object
= <Help />
'bottom' | 'top' | 'left' | 'right'