Aria Tips → Demo

This page is a sample page for aria-tips, a tiny and clever JS library that provides a support for tooltips using ARIA declarations.

You test it on elements below:

<button aria-describedby="tooltip-bottom" data-accesskey="ctrl+o">hover me ↓</button>
<p role="tooltip" id="tooltip-bottom" data-tooltip-direction="bottom" aria-hidden="true">this is the hover description in a tooltip :]</p>

<button aria-describedby="tooltip-right">hover me →</button>
<p role="tooltip" id="tooltip-right" data-tooltip-direction="right" aria-hidden="true">this tooltip takes place on right-edge<br/>on two lines

<button aria-describedby="tooltip-left">hover me ←</button>
<p role="tooltip" id="tooltip-left" data-tooltip-direction="left" aria-hidden="true">this one on left (and doesn't append an extra label)</p>

<button aria-describedby="tooltip-top">hover me ↑</button>
<p role="tooltip" id="tooltip-top" data-tooltip-direction="top" aria-hidden="true">and a top one!</p>

```
<div aria-describedby="tooltip-bottom" aria-label="ctrl+y">this one uses the same tip as the first-one</div>
```
this one uses the same tip as the first-one
(and declares a shortcut using aria-label, which is deprecated but still supported)

<div aria-describedby="tooltip-left" data-tooltip-direction="top">this uses the 3rd tip but positionned on top</div>

this uses the 3rd tip but positionned on top