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.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 37 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 hover), l'infobulle reste masquée. Pour les appareils tactiles, privilégiez un clic ou un focus pour déclencher l'affichage.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec 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>Le code complet HTML + CSS + JS de Tooltip Fade, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
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.
