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).
Best practices
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":
NerdWallet ratingNerdWallet'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."
<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:
NerdWallet ratingNerdWallet'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."
<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.
Props
<Tooltip>
analytics
boolean | Object
Optional analytics information (pulled from legacy HelpBubble)
bool | {
entityName: string
entityNamePrefix: string
}
children
= <Help />
node
Optional trigger element. default is <button><Help /><button>
className
string
Deprecated
Applies a CSS classname to the component.
@deprecated
content
node
Required
id
string
Optional ID. Set automatically in browser if not provided.
label
string
Optional label next to tooltip trigger
placement
= 'bottom'
'bottom' | 'top' | 'left' | 'right'
One of four placement choices, default: bottom
initiallyOpen
boolean
If set to true the tooltip will render initially open
dangerouslyForceFocusStyling
boolean
Force the component to render with its focus styles.
onChangeContentVisibility
Function
Optional handler for change of visibility for tooltip content. called with ({ visible: Bool })
popperOptions
Object
Deprecated
Now a no-op. Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance. @deprecated