Stable

Tooltip

A Tooltip is used to display text as either a label, description or supplementary information. Content contained within a Tooltip should be contextual, useful and nonessential. Because a Tooltip is hidden from the immediate view of the user, it should only be used as a last resort—often when there is not enough space to display the relevant information otherwise.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

Installation

bash

npm install @nib/tooltip

Usage

The tooltip component utilises the render-prop pattern.

jsx

import Tooltip from '@nib/tooltip';

<Tooltip id="foo" placement="bottom" tooltipContents={<Copy>Lorem ipsum dolor</Copy>}>
  {({triggerProps}) => (
    <Inline space={4} align="center">
      <div aria-label="Help" {...triggerProps}>
        <InfoSystemIcon />
      </div>
    </Inline>
  )}
</Tooltip>

Interactive demo

Hover over the Info icon below to display the tooltip.

jsx

<GreyBox>
  <Tooltip id="foo" placement="bottom" tooltipContents={<Copy>Lorem ipsum dolor</Copy>}>
    {({triggerProps}) => (
      <Inline space={4} align="center">
        <div aria-label="Help" {...triggerProps}>
          <InfoSystemIcon />
        </div>
      </Inline>
    )}
  </Tooltip>
</GreyBox>

<GreyBox>
  <Tooltip id="foo" placement="bottom" tooltipContents={<Copy>Lorem ipsum dolor</Copy>}>
    {({triggerProps}) => (
      <Inline space={4} align="center">
        <div aria-label="Help" {...triggerProps}>
          <InfoSystemIcon />
        </div>
      </Inline>
    )}
  </Tooltip>
</GreyBox>

Note: GreyBox is not a tooltip component, it is purely for demonstration purposes.

Props

Prop	Type	Default	Description
`id` (required)	string		The id of the tooltip
`tooltipContents` (required)	node		The element to be rendered within the tooltip. Can be multiple nested components, but must not include anything interactive.
`children` (required)	function		The orientation of the tooltip tail `top` or `bottom`.
`placement`	string	`bottom`	Whether to place the tooltip above or below the trigger. If the viewport edge impacts this preference, the opposite may be used.

Considerations

Never hide vital content in a Tooltip.

Content

Content within the tooltip should be kept short. Tooltip content should contain brief read-only text and should be set in sentence case. Multiple text elements can be included, but the tooltip should not include any interactive elements. If interaction is needed, consider using our Modal component.

Interaction

A Tooltip requires a trigger element for the user to interact with. Trigger elements can be anything but should preference using either the Icon or Link components.

On desktop, a Tooltip can be interacted with via hover and focus events. On mobile devices tap is the default interaction.

Edit this page