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

To be able to do:

$('button').accessibleSimpleTooltipAria({
  simpletooltipText: 'test'
});

Ex:

$.fn.accessibleSimpleTooltipAria = function (options) {

    var element = $(this);
    var $tooltip_text = options.simpletooltipText || '',
    $tooltip_prefix_class = typeof options.simpletooltipPrefixClass !== 'undefined' ? options.simpletooltipPrefixClass + '-' : '',
    $tooltip_content_id = typeof options.simpletooltipContentId !== 'undefined' ? '#' + options.simpletooltipContentId : '',
    $tooltip_code;

    var index_lisible = Math.random().toString(32).slice(2, 12);

    element.attr({
        'aria-describedby' : 'label_simpletooltip_' + index_lisible
        });

    element.wrap( '<span class="' + $tooltip_prefix_class + 'simpletooltip_container"></span>' );

    $tooltip_code = '<span class="js-simpletooltip ' + $tooltip_prefix_class + 'simpletooltip" id="label_simpletooltip_' + index_lisible + '" role="tooltip" aria-hidden="true">';
    if ( $tooltip_text !== '' ) {
       $tooltip_code += '' + $tooltip_text + '';
       }
       else {
            if ( $tooltip_content_id !== '' && $($tooltip_content_id).length ) {
                $tooltip_code += $($tooltip_content_id).html();
                }
            }
    $tooltip_code += '</span>';

    $( $tooltip_code ).insertAfter(element);

  };

Hello Nicolas,

Great job on the tooltip.

I tried it with VoiceOver and noticed it creates a keyboard trap. The users goes in circles between the button and the tooltip. The only way to move forward is to press "escape" but there's no way the user can know this.
Short screencast:
http://gijs.anysurfer.be/download/tooltip-voiceover.mp4

Can't figure out what (JS?) creates the keyboard trap.
It doesn't occur in iOS, only in MacOS.
There's no keyboard trap with other screenreaders either (tested with NVDA and Jaws).

Regards,

Gijs

Hi, I appreciate your work on all these accessible plugins! However I had trouble figuring out if your plugins fit my needs. The demos are not compatible with IE 8. The plugins work well when I put them in my site though. I have a couple of suggestions for improving the demos:

• Change jQuery link to script src="**//**code.jquery..." because IE blocks **http://**code.jquery...
• Use fallbacks for RGBA, e.g. a hex colour code.

Thanks!

Is it possible to make it compatible with svg path instead of buttons?
I think ok cliquable map

Just in case of the information of the tooltip is not needed for accessibility.

Hi Nicolas.

I'm not sure if this is the place to say this but I wanted to say thanks very much for taking the time to create these awesome accessible plugins.

I am having some problems however with the 'jquery-accessible-simple-tooltip-aria' plugin.

I copied and pasted your code as you included on the http://a11y.nicolas-hoffmann.net/simple-tooltip/ webpage but for some reason in Firefox v47.0, Chrome v51.0 and Internet Explorer 11.0 I see the black tooltip boxes but the arrow is not aligned properly and appears inside the tooltip, slightly covering the first letter appearing in the tooltop box.

It seems to appear fine in your samples on your actual http://a11y.nicolas-hoffmann.net/simple-tooltip/ webpage so perhaps another style on that page is making them look as intended.

I am including a link to Codepen where I pasted your examples for you to check out. The only modifications I made to the code was spacing and line breaks.

http://codepen.io/c0brarules/pen/BzpMqW

Could you please let me know what changes I need to make to have the arrow appear as it does on your actual sample page?

Thanks again.

Dwayne

See the « publishing npm package » documentation.

Hello Nicolas,

First of all, thanks for those plugins that help us !

This issue is more of a question / asking for confirmation.

I use a tooltip to give more information about the requirements for a password input. As for the text content of the tooltip, I would like to list those requirements. Correct me if I am wrong, but as the content is displayed in a <span>, I can't put a <ul><li> structure inside (it wouldn't be valid HTML).

I guess that this plugin is made with <span> so it can be used in any type of container (not only blocks, also inline ones), but have you ever had this kind of utilisation that requires to put some other type of content inside ?
If so, can you explain me the way to do it without breaking validation ?
If not... I don't really know what to do, I guess I will have to leave aside the idea of using a list structure, and just use a plain old sentence, even though it won't be as readable as a formatted list.

Anyway, thanks in advance !

PS : I will disclose the project on which we use some of your plugins, once it is public (in a few months).

For low vision user using zoom if tooltip is partially outside of the viewport due to there zoom level they will try to move mouse hover the tooltip to read the rest of the tooltip but for now the tooltip disappear when they do that

Je suis dans un cas où j'ai besoin de définir un aria-describedby sur le lien ouvrant la tooltip, mais le script actuel, lors de la création de la tootltip, supprime le aria-describedby existant, je perd donc une information.

J'ai tenté un bout de code pour ajouter avant l'aria-describedby généré, celui existant, mais la tooltip ne s'affiche plus.

Merci d'avance :)

No more to say: https://twitter.com/goetsu/status/625635043940171776

hello. I love the accessible tooltips, but i find that users are unable to close the tips on iOS devices. Maybe it would be nice to close when the users taps the tooltip itself. Is this possible?
Many thanks,