Tooltips provide additional information upon hover, focus or click. The information should be contextual, useful, and nonessential information.
<Tooltip>
The Tooltip component can render a variety of content ranging from short descriptive text, to paragraphs with links, or more complex interactive popovers.
The component provides a variety of props to configure tooltip behavior for these different use cases (i.e. interactive, dialog), and to customize styling (i.e. offset, maxWidth, className). The element that triggers a Tooltip can also be fully customized via props (i.e. triggerComponent, triggerContent).
This component makes use of @popperjs/core for tooltip positioning, focus-trap-react for trapping focus in Tooltip Dialogs, and react-transition-group for animations.
Icon Trigger
Code snippet
Inline
Code snippet
Interactive content
Code snippet
With Close
Code snippet
Tooltip Props
| Name | Type | Default | Description |
|---|---|---|---|
activeClassName | string | Classes applied to the tooltip trigger when the tooltip is active | |
ariaLabel | string | Helpful description of the tooltip for screenreaders | |
childrenrequired | React.ReactNode | Tooltip trigger content | |
className | string | Classes applied to the tooltip trigger | |
closeButtonLabel | string | Configurable text for the aria-label of the tooltip's close button | |
component | React.ReactElement<any> | any | ((...args: any[]) => any) | 'button' | When provided, will render the passed in component for the tooltip trigger. Typically will be a |
contentHeading | React.ReactNode | Heading for the tooltip content. This will show above 'title' content and inline with 'closeButton' if closeButton is set | |
dialog | boolean | Tooltip that behaves like a dialog, i.e. a tooltip that only appears on click, traps focus, and contains interactive content. For more information, see Deque's tooltip dialog documentation | |
id | string |
| |
interactiveBorder | number | 15 | Sets the size of the invisible border around interactive tooltips that prevents it from immediately hiding when the cursor leaves the tooltip. |
inversed | boolean | ||
offset | [number, number] | [0, 5] | Applies |
onClose | () => any | Called when the tooltip is hidden | |
onOpen | () => any | Called when the tooltip is shown | |
placement | Placement | 'top' | Placement of the tooltip body relative to the trigger. See the |
maxWidth | string | '300px' |
|
showCloseButton | boolean | Determines if close button is shown in tooltip. It is recommended that the close button is only used if | |
titlerequired | React.ReactNode | Content inside the tooltip body or popover. If contains interactive elements use the | |
transitionDuration | number | 250 | Duration of the |
zIndex | number | 9999 |
|
<TooltipIcon>
When using the <TooltipIcon> as the only child of <Tooltip>, be sure to provide an aria-label on the <Tooltip> to ensure an accessible name for the trigger.
Tooltip Icon Props
| Name | Type | Default | Description |
|---|---|---|---|
inversed | boolean |
Guidance
When to use
- Use for helpful, non-critical information to strengthen an existing message.
- Use to increase certainty and enhance confidence about an interaction.
- Use with brief descriptions as tooltips perform best with succinct text.
- Tooltips are useful as a last resort for space-constrained UI. Explore other options for keeping content visible without a tooltip.
When to consider alternatives
- Don’t hide information necessary for completing a task behind a tooltip interaction.
- Tooltips are microcopy and should be brief. Don't use a tooltip if you need a lot of text.
- Don’t use a tooltip when its content is repetitive or if usability is obvious.
- If content can fit outside a tooltip, don't use a tooltip.
Customization
The following Sass variables can be overridden to customize Tooltip fields: