Infobulle
Texte court au survol ou au focus ; positions haut, bas, gauche, droite.
Aperçu
Chaque position correspond à une classe modificateur sur bj-tooltip.
Haut Texte Bas Texte Gauche Texte Droite Texte
Position haut (défaut)
Sans modificateur : le contenu s’affiche au-dessus du libellé.
Survoler ou focus Infobulle en haut
<span class="bj-tooltip">
Libellé
<span class="bj-tooltip__content" role="tooltip">Texte au-dessus</span>
</span>Position bas
Classe bj-tooltip--bottom.
Bas Sous le libellé
<span class="bj-tooltip bj-tooltip--bottom">
Libellé
<span class="bj-tooltip__content" role="tooltip">Texte en dessous</span>
</span>Position gauche
Classe bj-tooltip--left.
Gauche À côté
<span class="bj-tooltip bj-tooltip--left">
Libellé
<span class="bj-tooltip__content" role="tooltip">À gauche</span>
</span>Position droite
Classe bj-tooltip--right.
Droite À côté
<span class="bj-tooltip bj-tooltip--right">
Libellé
<span class="bj-tooltip__content" role="tooltip">À droite</span>
</span>Variantes
data-bj-expanded Sur le contenu pour affichage programmatique.
Classes CSS
| Classe | Description |
|---|---|
bj-tooltip | Conteneur (position par défaut : haut, sans modificateur). |
bj-tooltip__content + role="tooltip" | Texte de l’infobulle sur l’élément enfant ; y placer role="tooltip". |
bj-tooltip--bottom / bj-tooltip--left / bj-tooltip--right | bj-tooltip--bottom, bj-tooltip--left, bj-tooltip--right ; sans classe = position haut. |
Accessibilité
Le contenu de l’infobulle a
role="tooltip" et un id stable ; le déclencheur reçoit aria-describedby vers cet id pour lier la description à l’élément focalisé. aria-hidden suit la visibilité (masqué quand l’infobulle n’est pas affichée). Affichage au survol (mouseenter) et au focus (focusin) ; masquage à la sortie du survol (mouseleave) et à la perte de focus (focusout). Échap ferme l’infobulle lorsque le focus est sur le déclencheur. Ne réservez pas une information indispensable au seul survol ou à l’infobulle : exposez aussi ce contenu ailleurs dans la page.