Tooltip

Small pop-up box that appears when a user hovers over an element. Tooltip can be used to provide additional information or context about that element. They should only contain supplementary, non-essential information and be used sparingly.

WCAG Score - Not compliant


Provided by the component

  • Tooltip appears when trigger is hovered or in focus.
  • Tooltip can be dismissed with an Esc key.
  • Tooltip has role=”tooltip”
  • Trigger includes aria-describedby with a unique ID of the corresponding tooltip.

 


Implementation considerations

  • Use tooltips to visually label interactive elements that don’t have a text label, such as Icon Button
  • Never include a Tooltip on non-interactive components (<div>, <span>, <p>) because it will not be accessible for keyboard or screen reader user
  • Don’t use tooltips on disabled elements. Disabled elements are not keyboard-accessible
  • Tooltips must contain only plain text; screen readers flatten their content, so complex markup isn’t conveyed.