The rebrand is live!
馃拝 馃帄
Read about it here
Skip to content
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鈥攐ften when there is not enough space to display the relevant information otherwise.

Installation

bash
npm install @nib/tooltip

Usage

The tooltip component utilises the render-prop pattern.

jsx
import Tooltip from '@nib/tooltip';
<Tooltip id="foo" mode="dark" 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

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

Props

PropTypeDefaultDescription
id (required)stringThe id of the tooltip
tooltipContents (required)nodeThe element to be rendered within the tooltip. Can be multiple nested components, but must not include anything interactive.
children (required)functionThe orientation of the tooltip tail top or bottom.
modestringdarkThe mode of the tooltip which determines the tooltip colour. Must be either light or dark.
placementstringbottomWhether 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.

Mode

There are two available Tooltip modes: light and dark. The default Tooltip is dark and should be used on background colors that provide sufficent contrast such as Mesh's colors white

or lightest
. Use the light tooltip when the background provides a darker contrast, where colors such as Mesh's darkest
or black
are used or where the tooltip may overlay an image.