Tooltip

A tooltip is a floating label that provides explanations for user interface elements or features.

What the component handles

  • Tooltip content is linked to trigger element via aria-labelledby for screen reader access
  • Keyboard navigation - tooltip shows visually when trigger element receives focus
  • Escape key dismisses the tooltip

What you need to provide

  • For static elements (tags, icons), enable enableStaticAccessibility prop to make the element keyboard focusable

Color contrast

Since the Tooltip’s background does not convey any additional information, there is no contrast requirement beyond the 4.5:1 text which is ensured.