Tooltip

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.

<Tooltip content="Add Tooltip content here"/>

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":

<Tooltip
  label="NerdWallet rating"
  content="NerdWallet's ratings are determined by our editorial team. The scoring formula takes into account the type of card being reviewed (such as cash back, travel or balance transfer) and the card's rates, fees, rewards and other features."
/>

<Tooltip
  label="NerdWallet rating"
  content="NerdWallet's ratings are determined by our editorial team. The scoring formula takes into account the type of card being reviewed (such as cash back, travel or balance transfer) and the card's rates, fees, rewards and other features."
/>

However, we can improve the experience for users using screen readers by providing a more helpful and descriptive label:

<Tooltip
  label="NerdWallet rating"
  aria-label="How are NerdWallet's ratings determined?"
  content="NerdWallet's ratings are determined by our editorial team. The scoring formula takes into account the type of card being reviewed (such as cash back, travel or balance transfer) and the card's rates, fees, rewards and other features."
/>

<Tooltip
  label="NerdWallet rating"
  aria-label="How are NerdWallet's ratings determined?"
  content="NerdWallet's ratings are determined by our editorial team. The scoring formula takes into account the type of card being reviewed (such as cash back, travel or balance transfer) and the card's rates, fees, rewards and other features."
/>

Try out the above examples using VoiceOver to see the difference.