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
When a tooltip is revealed, hitting the ESC key will hide the tooltip until the instance is blurred and focus or hover is reapplied.
As tooltips can be applied to any element, all elements with tooltips should be revealed by either mouse hover or keyboard focus.
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 </ELEMENT> <span class="a11y-tip__help"> Tooltip content goes here </span> </span>
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
<span class="a11y-tip"> <button type="button" aria-describedby="tt_id" class="a11y-tip__trigger"> Button w/tooltip </button> <span id="tt_id" role="tooltip" class="a11y-tip__help"> Tooltip content goes here </span> </span> <!-- 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> <span id="tool_tip_span" role="tooltip" class="a11y-tip__help"> Tooltip content goes here </span> </span>
License & Such
This script was written by Scott O'Hara.
It has an MIT license.
Do with it what you will :)