Comment ça marche
Grosso modo, le script entoure chaque class="js-tooltip"
d’un span class="<your-prefix-class>-container"
. Quand un tooltip est activé, il va insérer un élément dialog
juste après l’élément cliqué (dans le conteneur), mettre le focus dans le tooltip et piège le focus clavier dedans. Quand vous voulez le fermer, le focus clavier est redonné à l’élément qui avait ouvert le tooltip.
Pour les utilisateurs de souris, il est possible de cliquer en dehors du tooltip pour le fermer. Il est également possible de le clore en utilisant Esc, ou en utilisant Entrée ou Espace si vous êtes sur le bouton de fermeture..
Si vous n’activez jamais de tooltip, ce ne sera nulle part dans le code.
Comment l’utiliser
Télécharger le script
Vous pouvez utilisez la commande npm : npm i van11y-accessible-modal-tooltip-aria
.
Vous pouvez aussi utiliser Bower : bower install van11y-accessible-modal-tooltip-aria
.
Option et attributs
Utilisez les attributs data-tooltip-text
ou data-tooltip-content-id
pour mettre du contenu dans le tooltip.
- Mettez
class="js-tooltip"
sur un button
ou autre pour activer le script.
- Attribut
data-tooltip-prefix-class
: le préfixe de toutes les classes du tooltip.
- Attribut
data-tooltip-text
: le texte du tooltip (sera mis dans un élément p
).
- Attribut
data-tooltip-content-id
: l’id
du contenu (caché) dans la page qui sera mis dans le tooltip.
- Attribut
data-tooltip-title
: le titre principal du tooltip.
- Attribut
data-tooltip-close-text
: le texte du bouton de fermeture du tooltip.
- Attribut
data-tooltip-close-title
: l’attribut title
du bouton de fermeture.
- Attribut
data-tooltip-close-img
: le chemin vers une image valide pour le bouton de fermeture.
Souvenez-vous qu’il existe des démos, ce sera plus simple à comprendre : Démo de tooltip modal
Le script est lancé au chargement de la page. Si vous avez besoin de l’exécuter sur du contenu généré en AJAX, vous pourrez utiliser par exemple sur <div id="newContent">la source du tooltip modal</div>
:
van11yAccessibleModalTooltipAria(document.getElementById('newContent'));
Styles minimum
Voici les styles utilisés pour la démo :
(j’ai utilisé data-tooltip-prefix-class="simple-tooltip"
, mais vous pouvez utiliser ce que vous voulez pour styler)
dialog {
display: block;
border: 0;
}
.hidden { display: none; }
.simple-left-container {
position: relative;
}
.simple-left-tooltip {
position: absolute;
z-index: 666;
top: 80%;
left: 50%;
width: 15em;
background: #fff;
background: rgba (255, 255, 255, .9);
border: 1px solid #128197;
border-radius: .5em;
padding: 1em;
text-align: left;
}
.simple-left-tooltip__title {
margin: 0;
line-height: 1;
}
.simple-left-tooltip p {
font-size: 1em;
}
.simple-left-tooltip__close {
float: right;
border: 0;
font-family: inherit;
font-size: .8em;
background: #128197;
color: #fff;
border-radius: 1em;
}
.simple-left-tooltip__close:focus,
.simple-left-tooltip__close:hover,
.simple-left-tooltip__close:active {
outline: 1px dotted #fff;
}
.simple-left-tooltip__close:hover,
.simple-left-tooltip__close:active {
background: #4d287f;
}
@media (max-width: 55.625em) {
.simple-left-container {
position: static;
}
.simple-left-tooltip {
position: static;
width: auto;
margin-top: 1em;
}
}
Des exemples de styles
Voici les styles utilisés pour la démo « C’est si facile », j’ai utilisé data-tooltip-prefix-class="left-tooltip"
:
.left-tooltip-tooltip {
left: auto;
right: 0;
top: 0;
bottom: 0;
height: 100%;
z-index: 667;
position: fixed;
width: 25em;
max-width: 100%;
padding: .5em;
font-size: 1em;
border: 0;
animation: fromleft .3s linear;
background: #ddd;
background-image:
-webkit-linear-gradient(
top,
#128197 3em,
#f7f7f7 3em
); background-image:
linear-gradient(
to bottom,
#128197 3em,
#f7f7f7 3em
);
}
.left-tooltip-tooltip__close {
float: right;
background: transparent;
color: #fff;
border: 0;
}
.left-tooltip-tooltip__title {
font-size: 1.2em;
margin: 0;
color: #fff;
font-weight: normal;
}
@-webkit-keyframes fromleft {
0% { width: 0; }
100% { width: 25em; }
}
@keyframes fromleft {
0% { width: 0; }
100% { width: 25em; }
}
Autre exemple de style
Voici les styles utilisés pour le quatrième exemple de la démo, j’ai utilisé data-modal-prefix-class="fixed-tooltip"
pour namespacer les éléments, donc chacun commencera par .fixed-tooltip-
:
.fixed-tooltip-tooltip {
position: fixed;
bottom: 3em;
left: 3em;
width: 13em;
background: #fff;
z-index: 700;
border: 1px solid #128197;
right: auto;
padding: .5em;
}
.fixed-tooltip-tooltip__close {
background: transparent;
border: 0;
font: inherit;
float: right;
}
.fixed-tooltip-tooltip__title {
margin: 0;
}