Tooltip

Overview

Tooltips contain information to help users understand actions or page elements.

When to use:

  • They are short, and triggered by a user hovering with their keyboard or mouse over a UI element.
  • They are used to help reduce information density on otherwise crowded pages or forms.
  • Use tooltips to explain columns in a table, explain buttons (e.g. add, edit) on page or alongisde a help icon.

Implementation

Edit the code below to see your changes live!

<Tooltip placement="right" trigger={<Button>Hover</Button>}>
  Tooltip Content
</Tooltip>

Props

Prop name
Type
Default
Description
trigger *ReactElement

React Element that triggers the tooltip on hover.

placementauto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-starttop

Sets the position of the Tooltip.

Props ending with * are required

Do's and Don'ts

Do
Tooltips should have short, static information.
Keep Tooltips to less than three lines tall.
Don't
Avoid headers in Tooltips.
Don’t place actions in Tooltips.
If information is vital to complete a step, then it should be visible above/next to the element, not hidden in the Tooltip.