Skip to content

Tooltip

Status: Stable

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.

Examples

Default

Accessibility

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 rating

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

NerdWallet rating

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

Props

<Tooltip>

analytics

false | true | { entityName?: string | undefined; entityNamePrefix?: string | undefined; eventType?: string | undefined; payload?: any; }
Optional analytics information (pulled from legacy HelpBubble)

aria-label

string

children

ReactNode
Optional trigger element. default is <button><Help /><button>

className

Deprecated
string
Applies a CSS classname to the component.

content

Required
ReactNode

id

string
Optional ID. Set automatically in browser if not provided.

initiallyOpen

boolean
If set to true the tooltip will render initially open

label

string
Optional label next to tooltip trigger

onChangeContentVisibility

(visible: boolean) => void
Optional handler for change of visibility for tooltip content.

placement

"bottom" | "left" | "right" | "top"
One of four placement choices, default: bottom

popperOptions

Deprecated
any
Now a no-op. Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance.

style

Deprecated
CSSProperties

title

string

onFocus

FocusEventHandler<T>

onBlur

FocusEventHandler<T>

onClick

MouseEventHandler<T>