Robuste and accessible

  • C’est basé sur une structure HTML5 (balise dialog) plus ARIA ;
  • La navigation au clavier est supportée, basée sur un mix entre le tooltip et le Design Pattern ARIA pour les modales ;
  • Pas de CSS/JavaScript injecté en ligne, le DOM reste propre, ce qui cool pour le responsive/CSP.

C’est (hautement) personnalisable

  • Vous pouvez le styler/animer comme vous voulez ;
  • Vous pouvez créer un namespace pour les classes générées si vous avez besoin de différents styles dans la même page ;
  • Chaque aspect du script peut être personnalisé, si vous transpilez le script en ES5, ce sera compatible IE9+.

Libre et sous une license permissive

  • Pas de problème : c’est placé sous licence MIT, donc c’est libre, open-source et vous pouvez faire ce que vous voulez avec, incluant une utilisation commerciale. Cette note de permission doit être incluse dans toutes les copies complètes ou partielles du script.
  • Cependant, il n’est pas interdit de me dire que vous l’avez utilisé, ou de m’envoyer un petit « merci ». ;)

Léger

  • 19kb (développement, lisible par les humains) ;
  • ~7kb (minifié, lisible par des machines) ;
  • ~2kb minifié et gzippé (lisible par… des mutants ‽‽)

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.

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'));

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)

/* Pour les brontobrowsers */
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;
  /** fix typo inputs **/
  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;
}

/* for this example: tablets */
@media (max-width: 55.625em) {

  .simple-left-container {
    position: static;
	
  }
  .simple-left-tooltip {
    position: static;
	  width: auto;
	  margin-top: 1em;
  }
  
}

Voici les styles utilisés pour la démo « C’est si facile », j’ai utilisé data-tooltip-prefix-class="left-tooltip" :

/* tooltip modal */
.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; /* fallback IE9 */
  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; }
}

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;
}