馃摚
Have your say in our Mesh survey
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>

Example

An example of a tooltip with an icon as the trigger element.
An example of a tooltip with an icon as the trigger element.

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 Snow (White) or Sneezy. Use the light tooltip when the background provides a darker contrast, where colors such as Mesh's Doc or William are used or where the tooltip may overlay an image.