Annotation Layer
Info-bulles CSS ancrées à des passages surlignés — position absolute au-dessus, flèche pseudo-élément, opacité au survol. Zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La structure repose sur des span.annotation-marker en display: inline avec position: relative imbriqués dans un bloc de texte. Chaque marqueur contient un span.annotation-note en position: absolute; bottom: calc(100% + 8px) — positionné 8 px au-dessus du mot surligné et centré horizontalement par left: 50%; transform: translateX(-50%).
L'apparition est pilotée par deux propriétés CSS : opacity passe de 0 à 1 et transform: scale de 0,95 à 1 via le sélecteur .annotation-marker:hover .annotation-note, avec transition: opacity .2s, transform .2s. Aucun gestionnaire d'événement JavaScript n'est nécessaire — l'ensemble du comportement est déclaratif.
La flèche pointant vers le bas de la bulle est un pseudo-élément ::after classique : border-color: #fbbf24 transparent transparent crée un triangle CSS en top: 100% de la bulle, centré sur left: 50%.
L'empilage des bulles en cas de marqueurs adjacents est assuré par z-index: 10 sur .annotation-note et pointer-events: none pour éviter que la bulle survolée n'interfère avec les voisins.
Accessibilité
- Pas de
@media (prefers-reduced-motion)dans le code source — les transitionsopacityettransforms'exécutent quelles que soient les préférences OS. À compléter manuellement si l'usage l'exige. - Accessibilité clavier : l'effet repose sur
:hoveruniquement — les annotations ne s'affichent pas à la navigation clavier. Absence de:focus-withinsur.annotation-marker. - Contraste texte/fond dans la bulle :
#1a1a2esur fond#fbbf24— ratio ≈ 10:1, conforme WCAG AA et AAA. - Le surlignage repose sur un
border-bottomjaune visible même sans perception des couleurs de fond — l'information n'est pas transmise par la seule couleur. - Les lecteurs d'écran peuvent lire le contenu de
.annotation-note(pas dedisplay:none), mais l'association entre marqueur et note est implicite — aucunaria-describedbydans le code source.
Compatibilité navigateur
Utilise uniquement position: absolute, transform et transition — propriétés universellement supportées. Aucune dépendance externe.
Sans support des transitions CSS, les info-bulles apparaissent et disparaissent instantanément au survol — fonctionnement préservé, sans animation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="annotation-content">
Votre texte avec
<span class="annotation-marker">
terme annoté
<span class="annotation-note">
<span class="fn-num">Note :</span> explication courte
</span>
</span>
, suite du texte.
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| background dans .annotation-marker | rgba(251, 191, 36, .2) | Fond du surligneur au repos — modifiez la teinte et l'opacité pour s'adapter à votre palette brand. |
| border-bottom dans .annotation-marker | 2px solid #fbbf24 | Soulignement du marqueur — à aligner sur la couleur du fond de bulle pour la cohérence visuelle. |
| background dans .annotation-note | #fbbf24 | Fond de la bulle tooltip — toute couleur opaque ; ajustez color et la couleur de la flèche ::after en conséquence. |
| color dans .annotation-note | #1a1a2e | Couleur du texte dans la bulle — vérifiez le ratio de contraste WCAG avec le fond choisi (minimum 4,5:1). |
| bottom dans .annotation-note | calc(100% + 8px) | Écart vertical entre le bas de la bulle et le haut du marqueur — augmentez à calc(100% + 14px) pour aérer. |
| transition dans .annotation-note | opacity .2s, transform .2s | Durée et timing de l'apparition — passez à 0s pour supprimer l'animation (compatibilité prefers-reduced-motion). |
| font-size dans .annotation-note | .72rem | Taille du texte de la bulle — augmentez à .82rem si le contenu doit être lisible sur mobile ou dans des contextes à fort agrandissement. |
FAQ
hover fiable. Sur certains navigateurs, une première tape active la bulle, mais le comportement est incohérent. Pour le tactile, remplacez :hover par une gestion JavaScript qui bascule une classe CSS .active sur le marqueur au clic.bottom: calc(100% + 8px) sans contrainte de bord. Si votre texte est proche du haut ou des bords, la bulle peut dépasser. Solution : ajoutez une media query ou un peu de JavaScript qui bascule vers top: calc(100% + 8px) quand le marqueur est proche du bord supérieur..annotation-marker est indépendant et gère sa bulle via CSS pur. Plusieurs survols simultanés affichent plusieurs bulles en même temps. Le z-index: 10 assure que la bulle active passe au-dessus des marqueurs voisins.
