Skip to content

Tooltip

Status: Stable

Latest released: February 2020

Current version: v1.5.4

Storybook
GitHub

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.

Variants

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.

Development

import Tooltip from '@nerdwallet/react-tooltip';
<Tooltip />;

Props

<Tooltip>

analytics

boolean | Object

Optional analytics information (pulled from legacy HelpBubble)

bool | {
entityName: string
entityNamePrefix: string
}

Default

false

children

node

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

Default

<Help />

className

string

Default

null

content

node

Required

id

string

Optional ID. Set automatically in browser if not provided.


label

string

Optional label next to tooltip trigger

Default

null

placement

'bottom' | 'top' | 'left' | 'right'

One of four placement choices, default: bottom

Default

'bottom'

initiallyOpen

boolean

If set to true the tooltip will render initially open

Default

false

dangerouslyForceFocusStyling

boolean

Force the component to render with its focus styles.

Default

false

onChangeContentVisibility

Function

Optional handler for change of visibility for tooltip content. called with ({ visible: Bool })

Default

() => {}

popperOptions

Object

DEPRECATED: Now NOOP. Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance.