A simple tooltip component using aria for declarative instanciation.
We often want some tooltips to get extra-information about what an element does. Guess what…? We already have an ARIA role to describe those kind of helper: role=tooltip. Linked with the aria-describedby property, we can simply link tooltips to elements. What we need is just a little engine to use those declarations, and Aria-tips is what you need (: or, at least, what I need :).
Simply put the aria-tips.js and aria-tips.css (available in the dist/lib directory, or from the release page) to your vendors scripts and styles. Then, link them in you document:
<head>
<link rel="stylesheet" href="lib/aria-tips.css">
<script async src="lib/aria-tips.js" onload="AriaTips.bind();"></script>
</head>To bind the tooltips, just use the bind method offered by the module. Yo can also disable all tooltips by using the unbind method.
Note: If you use a builder tool, you'll probably want to wrap the script / css files direclty in your final build.
First, simply declares your element and its attached tooltip:
<button aria-describedby="tooltip-bottom" aria-label="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>What's important here are:
- on the element:
aria-describedby: must contains the elementidof the dedicated tooltip
- on the tooltip:
role=tooltip: describes it as a tooltipid: the id used to link it the the elementdata-tooltip-direction: the direction the tooltip will be attached to the element. Must be one of [top,right,bottom,left]aria-hidden=true: because we don't want the tooltip always be visible, do we?
Note that:
- the tooltip isn't nor need to be nested in the element in any kind of manner
- the tooltip can be declared everywhere in the document as we use the
idto find it - many elements can use the same tooltip ;)
If you bind a same tooltip to many elements, and you want it to be attached in a different direction for some elements, you can override the tooltip direction value by passing the same data-attribute to the element, as in:
<span aria-describedby="tooltip-bottom" data-tooltip-direction="left">another element for same tooltip, will appear attached to the left side</span>I originally want to describe the keyboard shortcuts bound to an element. So if a data-accesskey attribute is on the element, aria-tips will append it in a pre element inside the tooltip when it appears.
Note: We do not support accesskey due to its freaking implementation (as W3C itself recommend to not using it). We previously support shortcut declaration using the aria-label attribute, but it's a misuse of the spec. Say, using aria-label for this purposes is deprecated but still supported for compatibility.
The given stylesheet provides basic styles for tips (such as colors) and animatio. You should probably want to keep it as it, but you can also build your own styles and transition effects.
If you just want to customize tips rendering, you can simply deal with background-color / shadow-color / arrow-width to adapt it to your design. You can do it in another stylesheet or use the provided stylus one and change top-variables values.
If you want to develop on aria-tips, all you need to know is the following commands:
npm run dev # start the watcher with a server
npm run build # build the sources
npm run lint # run the linter on the code