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

ClasseDescription
bj-tooltipConteneur (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--rightbj-tooltip--bottom, bj-tooltip--left, bj-tooltip--right ; sans classe = position haut.

Accessibilité

Ne pas réserver une information critique au seul survol.