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 Usage

Pair a trigger element with aria-describedby pointing to another element with role="tooltip", and the tooltip will be displayed when the trigger is hovered or focused.

<p>
  Tooltip on a <span>
    <a href="#" aria-describedby="tip-link">link</a>
    <span id="tip-link" role="tooltip" data-placement="right">Tooltip</span>
  </span>
</p>
<p>
  Tooltip on
  <span>
    <em aria-describedby="tip-em">inline element</em>
    <span id="tip-em" role="tooltip">Tooltip</span>
  </span>
</p>
<p>
  <span>
    <button aria-describedby="tip-btn">Tooltip on a button</button>
    <span id="tip-btn" role="tooltip" data-placement="bottom">Tooltip</span>
  </span>
</p>

Placement

The tooltip is displayed on top by default but you can change it with the data-placement attribute on the tooltip element.

<section class="auto-grid">
  <span><button aria-describedby="tip-top">Top</button><span id="tip-top" role="tooltip">Top</span></span>
  <span><button aria-describedby="tip-right">Right</button><span id="tip-right" role="tooltip" data-placement="right">Right</span></span>
  <span><button aria-describedby="tip-bottom">Bottom</button><span id="tip-bottom" role="tooltip" data-placement="bottom">Bottom</span></span>
  <span><button aria-describedby="tip-left">Left</button><span id="tip-left" role="tooltip" data-placement="left">Left</span></span>
</section>