WAI-ARIA Compliant Tooltip Plugin With jQuery - a11y_tooltips

a11y_tooltips is a lightweight jQuery plugin to create accessible, progressively enhanced tooltips with support for ARIA attributes and keyboard interactions.

If a keyboard user doesn't want/need the tooltip anymore, the plugin allows them to hide it by pressing the ESC key. Once they move focus away from the element that had the tooltip, the plugin removes the hide-tip class so that the tooltip can be accessed again on re-focus.

How to use it:

1. Load the jQuery a11y_tooltips plugin's style sheet aria-tooltips.css to style the tooltips.

<link rel="stylesheet" href="aria-tooltips.css">

2. Add the following CSS helpers to the tooltip and trigger elements:

• a11y-tip: container element
• a11y-tip__trigger: trigger element
• a11y-tip__help: tooltip element
• a11y-tip__help--top: top tooltip
• a11y-tip__help--right: bottom tooltip
• a11y-tip__help--bottom: bottom tooltip
• a11y-tip__help--left: left tooltip

<span class="a11y-tip">
  <span class="a11y-tip__trigger">
    Tooltip Trigger
  </span>

  <span class="a11y-tip__help">
    Tooltip content goes here
  </span>
</span>

3. Load jQuery library (slim build is recommended) and the jQuery a11y_tooltips plugin's script aria-tooltips.js at the end of the document. Done.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="aria-tooltips.js"></script>

Changelog:

2023-10-06

• JS Update

---

This awesome jQuery plugin is developed by scottaohara. For more Advanced Usages, please check the demo page or visit the official website.