Skip to content

Tooltip

Tooltips are implemented using the ARIA: tooltip pattern, which consists of a trigger element with aria-describedby pointing to another element with role="tooltip".

Basic Tooltip

live preview
editable html
<p>
  Hover over this
  <span>
    <a href="#" aria-describedby="tooltip-example">link</a>
    <span id="tooltip-example" role="tooltip" data-placement="bottom">This is a tooltip</span>
  </span>
  to see a tooltip.
</p>

Reference

For more tooltip examples including different placements and use cases, see [role-tooltip].