Tooltip Fade
Infobulle positionnée au-dessus du déclencheur qui apparaît en fondu sur le survol — deux variantes : fond neutre ou gradient indigo avec flèche CSS.
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
L'effet repose entièrement sur CSS, sans une seule ligne de JavaScript. Le déclencheur .tooltip-trigger est un position: relative qui sert de point d'ancrage. L'infobulle enfant .tooltip est positionnée en position: absolute; bottom: calc(100% + 10px) — elle flotte donc exactement au-dessus, centrée horizontalement par left: 50%; transform: translateX(-50%).
La disparition et l'apparition reposent sur la combinaison opacity + visibility : opacity: 0; visibility: hidden au repos, opacity: 1; visibility: visible sur :hover. Les deux propriétés sont déclarées ensemble dans transition: opacity .3s, visibility .3s. visibility masque l'élément aux clics et au lecteur d'écran quand il est invisible ; opacity seule laisserait l'infobulle cliquable même à zéro opacité.
La variante .tooltip-arrow ajoute un gradient indigo-violet linear-gradient(135deg, #6366f1, #8b5cf6), un box-shadow coloré, et une flèche triangulaire via le pseudo-élément ::after (technique des bordures CSS : border-color: #8b5cf6 transparent transparent). Elle anime aussi transform pour une montée de 5 px sur l'apparition (translateY(-5px)), ce qui donne un sentiment de légèreté supplémentaire.
Pour afficher plusieurs infobulles côte à côte, la classe .tooltip-scene fournit un display: flex; gap: 32px; flex-wrap: wrap — chaque bouton reste autonome, aucun JS de coordination n'est nécessaire.
Accessibilité
- prefers-reduced-motion absent : le code n'inclut pas de règle
@media (prefers-reduced-motion: reduce). La transition de 0,3 s reste active même si l'utilisateur a désactivé les animations — à ajouter manuellement si nécessaire (transition: none !important). - L'infobulle n'est pas déclenchée au focus clavier : seul
:hoverest écouté. Les utilisateurs au clavier ne verront pas le contenu. Pour l'accessibilité complète, ajoutez:focus-within .tooltip { opacity: 1; visibility: visible; }ou utilisez l'attributaria-describedbyavec un élément toujours visible. - Le texte blanc sur le fond sombre de
.tooltip(rgba(30,30,40,.95)) est quasi-noir — contraste excellent, bien au-dessus de 7:1 WCAG AAA. - Le texte blanc sur le gradient indigo de
.tooltip-arrow(couleur de base#6366f1) affiche un ratio d'environ 5,9:1 — conforme WCAG AA (seuil 4,5:1). - L'infobulle n'a pas de rôle ARIA explicite dans le code livré. Pour une accessibilité complète, ajoutez
role="tooltip"sur le<span>etaria-describedbysur le déclencheur.
Compatibilité navigateur
Effet 100 % CSS — pas de JavaScript. Compatible partout où CSS Transitions sont disponibles.
Sur mobile (pas de <code>hover</code>), l'infobulle reste masquée. Pour les appareils tactiles, privilégiez un clic ou un <code>focus</code> pour déclencher l'affichage.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="tooltip-scene">
<!-- Variante standard : fond sombre neutre -->
<button class="tooltip-trigger">
Label
<span class="tooltip">Texte de l'infobulle</span>
</button>
<!-- Variante gradient avec flèche CSS -->
<button class="tooltip-trigger">
Label
<span class="tooltip-arrow">Texte stylisé</span>
</button>
</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 |
|---|---|---|
| transition: opacity .3s | 0.3s | Durée du fondu — réduisez à 0.15s pour une réactivité immédiate, augmentez à 0.5s pour un effet plus doux. |
| bottom: calc(100% + 10px) | 10px de gap | Distance verticale entre l'infobulle et son déclencheur. Augmentez à 16px pour plus d'air, réduisez à 6px pour une infobulle collée. |
| background (tooltip) | rgba(30,30,40,.95) | Couleur de fond de la variante standard — remplacez par n'importe quelle couleur brand (ex. rgba(15,23,42,.95) pour navy). |
| linear-gradient(135deg, #6366f1, #8b5cf6) | Indigo → Violet | Gradient de la variante .tooltip-arrow — remplacez les deux stops hex pour adapter au design system (ex. #0ea5e9, #06b6d4 pour un thème cyan). |
| border-color: #8b5cf6 | #8b5cf6 | Couleur de la flèche CSS (::after) — doit correspondre à la couleur de fin du gradient pour un rendu cohérent. |
| translateY(-5px) | -5px | Hauteur de la montée d'apparition sur .tooltip-arrow — mettez -8px pour un effet plus dynamique, 0px pour supprimer le mouvement. |
| font-size: .85rem | .85rem | Taille du texte dans les deux variantes. Passez à .8rem pour les infobulles denses (tableaux) ou .9rem pour les infobulles pédagogiques. |
FAQ
white-space: nowrap force une seule ligne. Pour autoriser le retour à la ligne, retirez cette règle et ajoutez max-width: 220px sur .tooltip ou .tooltip-arrow — le navigateur gérera les coupures automatiquement.:hover est écouté. Pour les utilisateurs clavier, ajoutez le sélecteur .tooltip-trigger:focus-within .tooltip { opacity: 1; visibility: visible; }. Pour une accessibilité complète, associez role="tooltip" sur le <span> et aria-describedby sur le bouton déclencheur.:hover ne se déclenche pas sur un simple tap sur iOS/Android. La solution la plus légère en JS : au click sur le déclencheur, basculez une classe is-visible qui applique opacity: 1; visibility: visible à l'infobulle, et fermez-la au clic suivant. Aucune dépendance externe requise.
