Skip to content

Tooltip

Status: Stable

Latest released: February 2020

Current version: v1.5.6

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
Open in Playroom

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

NerdWallet rating
Open in Playroom

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
}

children

= <Help />

node

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


className

string


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