AccessTooltip

A lightweight Javascript function to make the title attribute accessible for keyboard user.

Instruction (French version below)

Implementation

Insert the code right before the closing </body> element of your HTML document.

<script type="text/javascript" src="AccessTooltip.js"></script>

Then call the function right before the closing </body> element of your HTML document.

<script type="text/javascript">
    AccessTooltip({
        objs : 'a, button, input, textarea, select',
        tooltipClassName : 'access-tooltip',
        toolTipBetween : 5,
        toolTipUp : false,
        mouse : true,
        tempDelay : 4000,
        useAriaDP : false,
        useEscClose : true
    });
</script>

Parameters

• required objs : query selector for elements to set (tagName or any CSS selector)
• required tooltipClassName : tooltip CSS design classname
• required toolTipBetween : distance in pixels between the tooltip and the focused element
• optionnal tooltipUp : false to set the tooltip above, true to set over the focused element
• optionnal mouse : false to ignore, true to set mouse mode(replace native title by tooltip on mouseover)
• optionnal tempDelay : displaying delay in millisecondes ( 0 to ignore)
• optionnal useAriaDP : true to use the tooltip design pattern ARIA
• optionnal useEscClose : true to allow tooltip closed by ESC Key (note : true by default when useAriaDP is set)

Finally, create a CSS class for the tooltip, for example :

   .Ctooltip{
        position:absolute;
        background-color:#FFFFF0;
        border:1px solid gray;
        border-radius:3px;
        padding:3px;
        box-shadow:2px 2px 2px #000;
        color:#000;
        font-size:80%;
    }

Demonstration

• Demonstration page
• Access42.net
• AccessTooltip homepage project (french)

Instruction

Implémentation

Insérer le code de la fonction juste avant la balise de fermeture du </body> :

<script type="text/javascript" src="AccessTooltip.js"></script>

Puis appeler la fonction de la même manière

<script type="text/javascript">
    AccessTooltip({
        objs : 'a, button, input, textarea, select',
        tooltipClassName : 'access-tooltip',
        toolTipBetween : 5,
        toolTipUp : false,
        mouse : true,
        tempDelay : 4000,
        useAriaDP : false,
        useEscClose : true
    });
</script>

Paramètres

• requis objs : liste des sélecteurs CSS correspondant aux éléments à traiter.
• requis tooltipClassName : classe CSS utilisée pour la bulle d'aide
• requis toolTipBetween : décalage vertical, en pixel, entre la bulle d'aide et l'élément selectionné
• optionnel tooltipUp : false pour faire apparaître la bulle d'aide en dessous de l'élément selectionné, true pour la faire apparaitre au dessus
• optionnel mouse : true pour remplacer, à la souris, le title par la bulle d'aide
• optionnel tempDelay : temps d'affichage de la bulle d'aide en millisecondes (0 pour qu'elle reste visible jusqu'à la perte de focus)
• optionnel useAriaDP : true pour utiliser le design pattern ARIA tooltip
• optionnel useEscClose : true pour autoriser la fermeture de l'infobulle via la touche ESC (true par défaut avec le DP ARIA tooltip)

Enfin créer une classe CSS pour l'infobulle, par exemple :

   .Ctooltip{
        position:absolute;
        background-color:#FFFFF0;
        border:1px solid gray;
        border-radius:3px;
        padding:3px;
        box-shadow:2px 2px 2px #000;
        color:#000;
        font-size:80%;
    }

Démonstration

• Page de démonstration
• Access42.net
• Page d'accueil du projet