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.
Installation
npm install @nib-group/mesh-tooltip
Usage
The tooltip component utilises the render-prop pattern.
import Tooltip from '@nib-group/mesh-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.
<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:
GreyBoxis not a tooltip component, it is purely for demonstration purposes.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id (required) | string | The id of the tooltip, used for aria-describedby on the trigger element. | |
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 | A render function that receives { triggerProps } to be spread onto the trigger element. | |
placement | string | 'top' | Where to place the tooltip relative to the trigger. If the viewport edge impacts this preference, the opposite may be used. |
size | string | 'default' | The size of the tooltip. Can be 'small' or 'default'. |
delayShow | number | 0 | Delay in milliseconds before showing the tooltip on hover. |
delayHide | number | 0 | Delay in milliseconds before hiding the tooltip on hover out. |
closeOnOutsideClick | boolean | true | Whether to close the tooltip when clicking outside of it. |
closeOnTriggerHidden | boolean | false | Whether to close the tooltip when the trigger element scrolls out of view. |
defaultVisible | boolean | false | The initial open state of the tooltip when uncontrolled. |
followCursor | boolean | false | Whether the tooltip should follow the cursor position. |
interactive | boolean | false | Whether the tooltip stays open when the user hovers over it. |
offset | [number, number] | [0, 16] | The offset of the tooltip from the trigger as [crossAxis, mainAxis]. |
onVisibleChange | function | Callback fired when the tooltip open state changes. Receives (state: boolean). | |
trigger | string | string[] | null | ['hover', 'focus'] / ['click', 'focus'] | The interaction(s) that trigger the tooltip. Can be 'click', 'right-click', 'hover', or 'focus'. Defaults to hover + focus on desktop, click + focus on mobile. |
visible | boolean | Controls the tooltip open state. When provided, the tooltip becomes controlled. |
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.