Basic usage

Tooltips will open on mouseover or focus and should only contain string content. Reach out to the design systems team if rich text or interactive Tooltips are needed.

Tooltip has delay before showing / hiding, and has an optional animation.

Close on click

A tooltip can be hidden with the reference element is clicked. This could be useful if clicking opens another overlay/popover

Props

Accessibility

  • Tooltip will wrap the trigger element with a focusable container if the child is a string. Otherwise, ensure the underlying element is either focusable, or pass in shouldWrapTrigger={true}
  • aria-describedby is added to the Tooltip trigger