Tooltip Arrow
Infobulle positionnée au-dessus de son déclencheur, avec flèche CSS en triangle et animation de levée — 100 % CSS, zéro JS.
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
Le tooltip est un span.tooltip-arrow enfant direct du bouton déclencheur. Il est positionné en position: absolute, ancré via bottom: calc(100% + 12px) (au-dessus du parent) et centré horizontalement par left: 50%; transform: translateX(-50%). Aucun JS, aucune mesure de DOM au runtime — le positionnement est entièrement déclaratif.
La flèche pointant vers le bas est générée par le pseudo-élément ::after avec la technique des bordures CSS : une boîte de taille nulle dont les quatre bordures colorées forment un triangle. border-width: 8px fixe la taille de la pointe ; border-color: #8b5cf6 transparent transparent ne colore que la bordure supérieure, les trois autres restant invisibles — ce qui dessine le triangle.
La visibilité est pilotée par la paire opacity: 0 / visibility: hidden au repos et opacity: 1 / visibility: visible via le sélecteur .tooltip-trigger:hover .tooltip-arrow. La propriété visibility est nécessaire en plus de l'opacité : sans elle, le span invisible intercepterait les événements souris des éléments sous-jacents.
L'animation de levée est produite par transform: translateX(-50%) translateY(-5px) au survol — le tooltip monte de 5 px depuis sa position de repos. La transition opacity .3s, visibility .3s, transform .3s orchestre les trois propriétés en parallèle. À noter : il n'y a pas de gestion prefers-reduced-motion dans le code — l'animation joue quelle que soit la préférence OS de l'utilisateur.
Accessibilité
- prefers-reduced-motion absent : le code ne contient pas de règle
@media (prefers-reduced-motion: reduce). L'animation de levée et les transitions opacity/transform jouent même si l'utilisateur a activé la réduction de mouvement dans son OS. Correctif : ajouter@media (prefers-reduced-motion: reduce) { .tooltip-arrow { transition: opacity .15s, visibility .15s; transform: translateX(-50%) !important; } }. - Relation tooltip/déclencheur non déclarée en ARIA : le
spann'a pas derole="tooltip"et le bouton n'a pas d'aria-describedbypointant vers ce span. Les lecteurs d'écran ne liront pas l'infobulle au survol. - Le tooltip n'est pas accessible au focus clavier : le sélecteur
:hoverne s'active pas au focus. Ajouter.tooltip-trigger:focus-visible .tooltip-arrow { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-5px); }. - Contraste texte : blanc
#fffsur gradient indigo#6366f1→ ratio ≈ 5,5:1, WCAG AA respecté. - Le déclencheur est un
<button>natif HTML : focusable au clavier, activable à la touche Entrée/Espace, visible dans l'arbre d'accessibilité sans surcharge.
Compatibilité navigateur
Repose sur position: absolute, pseudo-élément ::after, transform, transition, opacity et visibility — aucun JS, aucune API moderne requise.
Sans support <code>transition</code> (IE 9 et antérieur), le tooltip apparaît et disparaît instantanément sans animation — fonctionnel. Sur mobile, où l'événement <code>hover</code> n'existe pas, le tooltip reste masqué : prévoir un déclencheur au tap ou remplacer par un composant JS dédié.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="component-demo">
<button class="tooltip-trigger">
Libellé du déclencheur
<span class="tooltip-arrow">Texte de l'infobulle</span>
</button>
</div>
</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 |
|---|---|---|
| .tooltip-arrow background | linear-gradient(135deg, #6366f1, #8b5cf6) | Gradient de fond du tooltip. Remplacez par votre palette brand — la couleur finale du gradient doit correspondre à la valeur de border-color dans ::after. |
| .tooltip-arrow::after border-color | #8b5cf6 transparent transparent | Couleur de la flèche triangulaire. Doit correspondre à la couleur de fin du gradient du tooltip pour un rendu continu. |
| bottom: calc(100% + 12px) | 12px | Gap vertical entre le haut du déclencheur et le bas du tooltip. Augmentez pour plus d'espace visuel, réduisez pour les interfaces denses. |
| .tooltip-arrow padding | 10px 18px | Espace intérieur du tooltip. Réduisez à 6px 12px pour un tooltip compact (icônes), augmentez pour du texte d'aide long. |
| .tooltip-arrow font-size | 0.85rem | Taille du texte. 0.75rem pour les toolbars denses, 0.9rem pour les tooltips d'aide lisibles à distance. |
| .tooltip-arrow border-radius | 8px | Arrondi des coins du tooltip. 4px pour un style utilitaire, 12px pour un design plus doux. |
| .tooltip-arrow::after border-width | 8px | Taille de la pointe de la flèche en pixels. 5px pour une petite flèche discrète, 12px pour une flèche bien visible. |
| transition duration | .3s | Durée des transitions opacity/visibility/transform. Réduisez à .15s pour un retour immédiat, augmentez à .5s pour un effet plus élégant. |
FAQ
left:50%/translateX(-50%)) sans détection de collision. Pour les éléments proches du bord, ajustez manuellement left avec un offset négatif clamped, ou adoptez une bibliothèque de positionnement contextuel comme Floating UI qui gère automatiquement les cas limites.:hover). Ajoutez ce sélecteur pour le focus clavier : .tooltip-trigger:focus-visible .tooltip-arrow { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-5px); }. Ajoutez aussi role="tooltip" sur le span et aria-describedby sur le bouton pour les lecteurs d'écran.bottom: calc(100% + 12px) par top: calc(100% + 12px) et changez border-color en transparent transparent #8b5cf6 (triangle vers le haut). Pour gauche/droite, utilisez right: calc(100% + 12px) ou left: calc(100% + 12px) avec transform: translateY(-50%) et les border-colors correspondantes.
