nico3333fr / jquery-accessible-dialog-tooltip-aria Goto Github PK

Many thanks for this solution! It works perfectly for us (cannot share the URL yet, as we are still working on the site).

We are using not a real button but an SVG image for the tooltip. Thus I had to look around for how to keep accessibility. I ended up with this code:

<img src="/img/info.svg" 
class="js-tooltip" data-tooltip-prefix-class="simple-tooltip" data-tooltip-content-id="info_waterHeater" data-tooltip-close-text="X" 
role="button" 
tabindex="0" 
onkeydown="if(event.keyCode==13||event.keyCode==32){event.preventDefault();$(this).click();}">

This clearly is nothing specific to your code, but maybe others would like to use an image as button as well. The last three lines are needed to keep accessibility:
role="button" signals its clickability (including different cursor on hover)
tabindex="0" lets you tab to the clickable icon
onkeydown=... ensures that a click is triggered on pressing either the ENTER or SPACE key.
I found the needed info mostly on this page https://www.deque.com/blog/accessible-aria-buttons/

• image for close button
• a wrapper for close button text

Chrome is executing
if ( !$target.is('.js-dialogtooltip') && !$target.is('.js-tooltip') && !$target.parents(".js-dialogtooltip").is(".js-dialogtooltip")) { $('.js-dialogtooltip').remove(); }

After having opened a tooltip (yes, it is stupid, IE/Firefox are not doing it). Only way to solve, add a timeout on opening.

Chrome, you suck.

See the « publishing npm package » documentation.

Bonjour Nicolas,

Est-ce que ton plugin pourrait marcher avec un tooltip qui s'afficherait au survol plutôt qu'au clic ? et est-ce que ça serait toujours accessible ?

Merci !