An Accessible Tooltip Plugin

Accessibility is one aspect often lacking in web development. Tooltip popups should happen when a user hovers or focuses over a given target element.

Browser Support

IE8+, Chrome, Firefox, Opera, Safari, iOS Safari, Android

Markup

When creating a tooltip, make sure the actual tooltip (the element containing role="tooltip") has a unique id, and that source element points to that id in its aria-describedby.

<a
  href="#"
  class="tooltip"
  aria-haspopup="true"
  aria-describedby="tip1">
  <span
    class="anchor-text"
    role="presentation">I contain a tooltip
  </span>
</a>

<div role="tooltip" id="tip1" aria-hidden="true">
  Tooltip text goes <strong>here</strong>
</div>

On Hover

On Focus

Initialize

$(".tooltip").tooltip(); // Initialize n tooltips