Accessible Tooltip Component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

ARIA Tooltips

A progressively enhanced ARIA tooltip component.


Note: The functionality of these tooltips is based on the ARIA 1.0 specification. There is currently no finalized version under the ARIA 1.1 specification.

Tooltips appear when hovering over or focusing a tooltip component.

Tooltps, per the WAI-ARIA 1.0 Practices Recommendation, should not be revealed until after a short delay (1 - 5 seconds) has passed. By default, this tooltip plug-in has a 1s delay. To remove this delay, use the class .a11y-tip--no-delay

When a tooltip is revealed, hitting the ESC key will hide the tooltip until the instance is blurred and focus or hover is reapplied.

Default Setup

As tooltips can be applied to any element, all elements with tooltips should be revealed by either mouse hover or keyboard focus.

For elements that do not inherently have the ability to receive keyboard focused, a check is run via JavaScript to add a tabindex="0" to these elements.

The minimal mark-up required to generate a tooltip component is the following:

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

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

The JavaScript will go through and add the missing id and role="tooltip" to the .a11y-tip__help element. An aria-describedby="*id_goes_here*" will be set to the .a11y-tip__trigger, where the value of the attribute is equal to the generated ID of the .a11y-tip__help element.

Progressively Enhanced

In instances where JavaScript is not available, the minimal mark-up tooltip will render all content available by default to ensure that there is no important information inaccessible to end users.

However, if you have complete access to the mark-up, you can hard code all the attributes generated by JavaScript to have fully functioning ARIA tooltips without the need for JavaScript:

<span class="a11y-tip">
  <button type="button" aria-describedby="tt_id" class="a11y-tip__trigger">
    Button w/tooltip

  <span id="tt_id" role="tooltip" class="a11y-tip__help">
    Tooltip content goes here

<!-- or -->

<span class="a11y-tip">
  <!-- a tabindex of 0 will need to be manually added to any
       element that doesn't receive keyboard focus by default -->
  <span aria-describedby="tool_tip_span" class="a11y-tip__trigger" tabindex="0">
    Tooltip Trigger span

  <span id="tool_tip_span" role="tooltip" class="a11y-tip__help">
    Tooltip content goes here

License & Such

This script was written by Scott O'Hara.

It has an MIT license.

Do with it what you will :)