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.
dialog), and to customize styling (i.e.
className). The element that triggers a
Tooltip can also be fully customized via props (i.e.
Classes applied to the tooltip trigger when the tooltip is active
Helpful description of the tooltip for screenreaders
Tooltip trigger content
Classes applied to the tooltip trigger
Configurable text for the aria-label of the tooltip's close button
When provided, will render the passed in component for the tooltip trigger. Typically will be a
Heading for the tooltip content. This will show above 'title' content and inline with 'closeButton' if closeButton is set
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
Sets the size of the invisible border around interactive tooltips that prevents it from immediately hiding when the cursor leaves the tooltip.
Called when the tooltip is hidden
Called when the tooltip is shown
Placement of the tooltip body relative to the trigger. See the
Determines if close button is shown in tooltip. It is recommended that the close button is only used if
Content inside the tooltip body or popover. If contains interactive elements use the
Duration of the
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.
The following Sass variables can be overridden to customize Tooltip fields:
- 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.
- 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.