Créer une infobulle en CSS pur

Si vous avez besoin d’une infobulle légère et que vous ne souhaitez pas intégrer une bibliothèque JavaScript pour la construire, le CSS seul peut s’en charger étonnamment bien. Aucune dépendance, aucun écouteur d’événements — juste quelques règles CSS judicieusement placées.

Cet article présente une implémentation pratique et moderne utilisant des pseudo-éléments, des attributs data et des transitions, ainsi que les considérations d’accessibilité que vous devez réellement connaître.

Comment fonctionne une infobulle en CSS pur

L’idée de base est simple : appliquer position: relative à l’élément déclencheur, puis utiliser un pseudo-élément ::after comme bulle d’infobulle, positionné de manière absolue par rapport à son parent. Masquez-le par défaut, et révélez-le lors du :hover et du :focus-visible.

Comme les pseudo-éléments ne peuvent pas lire directement depuis le DOM, vous transmettez le texte de l’infobulle via un attribut data-tooltip et le récupérez avec content: attr(data-tooltip). Cela garde votre HTML propre et évite de dupliquer le texte dans une <span> masquée.

La structure HTML

<button
  class="tooltip-trigger"
  data-tooltip="Saves your current progress"
>
  Save
</button>

Utiliser un <button> ou une ancre (<a>) comme élément déclencheur est important. Ces éléments sont nativement focusables, ce qui signifie que les utilisateurs au clavier peuvent les atteindre sans aucun travail supplémentaire.

Remarque : si vous souhaitez utiliser aria-describedby, il doit pointer vers l’id d’un élément réel et visible dans le DOM — pas vers un pseudo-élément. Comme cette technique utilise ::after, omettez aria-describedby à moins de rendre également le texte de l’infobulle dans un élément réel.

Le CSS

.tooltip-trigger {
  position: relative;
  cursor: pointer;
}

/* Tooltip bubble */
.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);

  background-color: #1a1a1a;
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 4px;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;

  z-index: 10;
  pointer-events: none;
}

/* Show on hover and keyboard focus */
.tooltip-trigger:hover::after,
.tooltip-trigger:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

Pourquoi opacity + visibility plutôt que display ?

Passer entre display: none et display: block ne peut pas faire l’objet d’une transition — l’infobulle apparaîtrait et disparaîtrait brusquement. Utiliser opacity conjointement avec visibility: hidden vous permet de faire apparaître l’infobulle en fondu en douceur tout en l’excluant de l’interaction au pointeur lorsqu’elle est masquée. Combiner visibility avec opacity empêche également l’infobulle masquée de rester visuellement interactive.

Pourquoi pointer-events: none ?

Sans cette règle, la bulle d’infobulle elle-même peut déclencher un état de survol, provoquant un scintillement de l’infobulle lorsque le curseur passe dessus. Définir pointer-events: none sur l’élément ::after empêche cela complètement.

Pourquoi transform: translateX(-50%) pour le centrage ?

Définir left: 50% déplace le bord gauche de l’infobulle au centre du déclencheur. Le décalage translateX(-50%) la ramène ensuite de la moitié de sa propre largeur, la centrant quelle que soit la largeur du texte de l’infobulle — aucun calcul en pixels codé en dur n’est nécessaire.

Limites d’accessibilité à connaître

Une infobulle CSS pure activée au survol présente de réelles limites :

• Les lecteurs d’écran peuvent ne pas l’annoncer. La propriété content sur un pseudo-élément n’est pas lue de manière fiable par tous les lecteurs d’écran. Pour les informations critiques, incluez-les dans l’interface visible ou utilisez aria-describedby pointant vers un élément réel.
• Le comportement au survol est incohérent sur les appareils tactiles. Les infobulles uniquement en CSS ne devraient pas être utilisées pour des informations essentielles.
• Aucun rôle ni région live. Le CSS seul ne peut pas communiquer la sémantique d’infobulle aux technologies d’assistance.

Pour de simples indications complémentaires sur des éléments interactifs, une infobulle CSS convient. Pour tout ce qui est essentiel à l’accomplissement d’une tâche, vous voudrez utiliser JavaScript afin de gérer le focus, l’annonce et l’état ARIA.

Perspectives : positionnement par ancrage CSS et API Popover

Le positionnement par ancrage CSS rend le placement des infobulles beaucoup plus flexible — vous pouvez attacher une infobulle à n’importe quel élément sans dépendre de position: relative sur le parent. La prise en charge du positionnement par ancrage est désormais largement disponible dans les navigateurs modernes selon Can I Use.

Pour un comportement interactif plus riche, l’API Popover mérite d’être explorée comme alternative native pour les interfaces flottantes interactives.

Conclusion

Une infobulle en CSS pur construite avec ::after, content: attr(data-tooltip) et une transition visibility/opacity est propre, rapide et sans dépendance. Associez-la à :focus-visible pour la prise en charge du clavier et vous obtenez une base solide. Soyez simplement honnête sur les limites des infobulles CSS — pour tout ce qui dépasse les indications complémentaires, optez pour JavaScript ou une fonctionnalité native de la plateforme comme l’API Popover.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..