Tooltip examples

Note: For React projects, this component does not use exact same styles as Design System website, it uses dedicated styles (for positionning/layout issues/etc.).

Design pattern

  • Tooltip can be triggered by keyboard focus or mouse.
  • Tooltip and the element that triggered it are linked via aria-describedby="a_random_id".
  • Activating a tooltip removes aria-hidden="true" on it.
  • Using Esc closes the tooltip.

Tooltip code

<span class="tooltip-container">
  <!-- tooltip-container is used to position the tooltip, relative to -->
  <button class="js-tooltip pm-button" aria-describedby="a_random_id">
    Show me another tooltip
  <span class="tooltip-top|bottom|left|right" id="a_random_id" role="tooltip" aria-hidden="true">
    Cool, it works!