Robuste et accessible

C’est (hautement) personnalisable

  • Vous pouvez le styler comme vous voulez ;
  • Vous pouvez créer un namespace pour les classes générées si vous avez besoin de différents comportements 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

  • 5kb (développement, lisible par les humains) ;
  • 1,7kb (minifié, lisible par des machines) ;
  • ~0,8kb minifié et gzippé (lisible par… des mutants ‽‽)

Comment ça marche

Pour commencer

En clair, le script entoure chaque class="js-simple-tooltip" avec un span class="<votre-préfixe-class>-container" et ajoute le contenu dans un conteneur caché juste après. Dès que le focus clavier ou la souris est sur l’élément avec class="js-simple-tooltip", l’infobulle est affichée.

Vous pouvez l’utiliser sur l’élément que vous voulez (input, button, a…).

Ensuite un peu de stylage

Ensuite, il va générer quelques classes pour vous, pour vous permettre de styler vos infobulles comme vous le souhaitez.

ARIA arrive ensuite

Grâce aux attributs aria-describedby et ids générés à la volée, l’information ne se perd jamais.

Et JavaScript fait le reste

Quelques listeners pour les interactions clavier et souris sont ajoutés, quand vous en activez un, le script va mettre à jour les attributs et gérer le clavier, vous pourrez le fermer en utilisant la touche Esc.

Comment l’utiliser

Télécharger le script

Vous pouvez utilisez la commande npm : npm i van11y-accessible-simple-tooltip-aria.
Vous pouvez aussi utiliser Bower : bower install van11y-accessible-simple-tooltip-aria.

Attributs

Utilisez l’attribut data-simpletooltip-text ou data-simpletooltip-content-id sur un élément pour activer l’infobulle.

  • Mettez simplement class="js-simpletooltip" sur un bouton pour activer le script.
  • Attribut data-simpletooltip-prefix-class (non obligatoire) : le préfixes pour toutes les styles/classes de l’infobulle (utile pour créer différents styles).
  • Attribut data-simpletooltip-text : le texte de l’infobulle.
  • Attribut data-simpletooltip-content-id : l’id du contenu (caché) dans votre page qui sera affiché dans l’infobulle.

Exemples

Voici 3 exemples :

<button class="js-simple-tooltip" data-simpletooltip-text="Super, ça marche !">
  Survolez-moi ou focusez-moi pour afficher l’infobulle
</button>
          
<button class="js-simple-tooltip" data-simpletooltip-content-id="tooltip-case_1">
  Montrez-moi une autre infobulle
</button>
<div id="tooltip-case_1" class="hidden">
  Super, vous pouvez prendre le contenu d’un bloc caché.
</div>
          
<button class="js-simple-tooltip" data-simpletooltip-prefix-class="minimalist-left" 
  data-simpletooltip-text="Oui, avec data-simpletooltip-prefix-class, si facile">
 Et un autre ?
</button>

Ces exemples sont pris de la démo.

Comment (bien) le styler

Ces exemples sont pris de la démo.

/* Tooltip caché par défaut */
.simpletooltip[aria-hidden="true"],
.minimalist-simpletooltip[aria-hidden="true"],
.minimalist-left-simpletooltip[aria-hidden="true"] {
  display: none;
}
/* position relative pour les conteneurs */
.simpletooltip_container,
.minimalist-simpletooltip_container,
.minimalist-left-simpletooltip_container {
  position: relative;
}

/* styles tooltip */
.simpletooltip, 
.minimalist-simpletooltip, 
.minimalist-left-simpletooltip {
  position: absolute;
  z-index: 666;
  width: 10em;
  border-radius: .5em;
  background: rgba( 0, 0, 0, .9 );
  color: #eee;
  padding: .5em;
  text-align: left;
  line-height: 1.3;
}
.simpletooltip, 
.minimalist-simpletooltip {
  right: auto;
  left: 100%;
  margin-left: .5em;
}
.minimalist-left-simpletooltip {
  right: 100%;
  left: auto;
  margin-right: .5em;
}
/* utilise des pseudo-éléments pour faire les flèches */
.simpletooltip::before,
.minimalist-simpletooltip::before,
.minimalist-left-simpletooltip::before {
  content: '';
  speak: none;
  position: absolute;
  z-index: 666;
  width: 10px;
  height: 10px;
}
.simpletooltip::before,
.minimalist-simpletooltip::before {
  top: .5em;
  left: -10px;
  margin-left: -10px;
  border: 10px solid transparent;
  border-right: 10px solid rgba( 0, 0, 0, .9 );
}
.minimalist-left-simpletooltip::before {
  top: .5em;
  right: -10px;
  margin-right: -10px;
  border: 10px solid transparent;
  border-left: 10px solid rgba( 0, 0, 0, .9 )
}

/* cela peut facilement être adapté pour les tablettes/mobiles */

/* pour cet exemple : mobile */
@media (max-width: 44.375em) {

  .simpletooltip, 
  .minimalist-simpletooltip,
  .minimalist-left-simpletooltip  {
    top: 100%;
    left: 50%;
	right: 0;
    margin: 0;
	margin-top: .7em;
	margin-left: -5em;
  }
  .simpletooltip::before, 
  .minimalist-simpletooltip::before,
  .minimalist-left-simpletooltip::before  {
    top: -10px;
	right: auto;
	left: 50%;
	margin-left: -5px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-bottom: 10px solid rgba( 0, 0, 0, .9 );
  }
  
}