Guided Tour Spotlight
Tooltip ancré dynamiquement sur chaque élément UI, flèche auto-flippée et spotlight CSS — guidez vos utilisateurs pas à pas sans librairie externe.
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 spotlight est intégralement CSS : la classe .tour-active applique sur l'élément ciblé un box-shadow à deux couches — un anneau indigo de 3 px (rgba(99,102,241,.25) 0 0 0 3px) et un halo diffus de 30 px (rgba(99,102,241,.15) 0 0 30px). Aucun overlay semi-transparent, aucun masque SVG : la surbrillance est un effet de bordure pur qui ne perturbe ni le z-index ni le flux du reste de la page. La transition: .3s sur .tour-element lisse le passage d'un élément à l'autre.
Le tooltip est positionné à la volée par showStep(t) via deux appels à getBoundingClientRect() — un sur l'élément actif, un sur le conteneur .tour-scene. Les coordonnées sont calculées en pixels relatifs au conteneur : r = element.right − scene.left + 14 (décalage horizontal) et l = element.top − scene.top − 10 (alignement vertical). L'assignation directe sur tooltip.style.left et tooltip.style.top repositionne le tooltip sans reflow de page.
Un mécanisme d'auto-flip détecte le débordement avant chaque render : si r + 210 > scene.width, le tooltip bascule à gauche de l'élément (r = element.left − scene.left − 214) et la flèche est ré-orientée via style.cssText — rotation 135° avec ancre à droite. Dès que l'espace est suffisant à droite, la classe arrow-left est restaurée et la flèche pointe de nouveau vers l'élément mis en avant.
L'apparition du tooltip repose sur une double transition CSS sur .tour-tooltip.visible : opacity 0→1 et translateY(6px→0) en 0,3 s. La classe visible est ajoutée à chaque appel de showStep. Le texte d'étape (.tour-text) et le libellé de progression (.tour-step, format « Étape N/3 ») sont mis à jour par affectation directe de textContent — pas de DOM supplémentaire créé à chaque étape.
Accessibilité
- prefers-reduced-motion non géré — les transitions CSS (
opacity,transform,bordersur.tour-element) restent actives quel que soit le paramètre système. Correctif recommandé :@media (prefers-reduced-motion: reduce) { .tour-element, .tour-tooltip { transition: none !important; } } - Les boutons Suivant et Passer sont de vrais
<button>HTML — navigables au clavier (Tab + Entrée/Espace) et annoncés correctement par les lecteurs d'écran sans code supplémentaire. - Aucun
aria-livesur le tooltip : les lecteurs d'écran n'annoncent pas automatiquement les changements d'étape. Recommandation : ajouteraria-live="polite"sur.tour-text. - Contraste texte : blanc (#e0e7ff) sur fond dégradé #312e81 → ratio ≈ 6,3:1, conforme WCAG AA. Le libellé de progression (#818cf8) sur #312e81 → ratio ≈ 2,8:1, insuffisant pour le texte normal — à renforcer si l'accessibilité est critique.
- Aucun
roleniaria-labelsur le conteneur tour. Recommandé :role="dialog"etaria-label="Visite guidée"sur.tour-scene, plusaria-modal="true"si le tour bloque l'interaction avec le reste.
Compatibilité navigateur
Repose uniquement sur getBoundingClientRect(), classList.toggle() et les transitions CSS — aucune API expérimentale ni dépendance externe.
Sans JavaScript, le tooltip reste caché (<code>opacity: 0</code>) et aucun élément ne reçoit <code>.tour-active</code> — l'UI sous-jacente reste entièrement fonctionnelle, aucune erreur console.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="tour-scene" id="tourScene">
<div class="tour-ui">
<div class="tour-element tour-active" id="tourEl1">Élément 1</div>
<div class="tour-element" id="tourEl2">Élément 2</div>
<div class="tour-element" id="tourEl3">Élément 3</div>
</div>
<div class="tour-tooltip" id="tourTooltip">
<div class="tour-arrow arrow-left"></div>
<div class="tour-step" id="tourStepLabel">Étape 1/3</div>
<div class="tour-text" id="tourStepText">Description de l'étape.</div>
<div class="tour-nav">
<button class="tour-skip" id="tourSkip">Passer</button>
<button class="tour-next" id="tourNext">Suivant</button>
</div>
</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 |
|---|---|---|
| elements (tableau JS) | — | Tableau de nœuds DOM à mettre en surbrillance tour à tour. Exemple : [document.getElementById('step1'), document.getElementById('step2')]. Tout nœud dans .tour-scene est accepté — boutons, cartes, champs de formulaire, items de nav. |
| steps (tableau JS) | — | Tableau d'objets { text: '…' }, un par étape. Le champ text alimente #tourStepText. Attention : le libellé de progression et la condition du bouton final sont hardcodés pour 3 étapes dans showStep — adaptez "Étape " + (t+1) + "/3" et 2 === t si votre tour en compte un nombre différent. |
| .tour-tooltip { width } | 200px | Largeur du tooltip. Augmentez à 240–260 px pour des textes d'étape plus longs ; ajustez aussi le seuil d'auto-flip dans showStep (r + 210 > o.width → remplacez 210 par votre-width + 10). |
| .tour-element.tour-active { border-color } | #6366f1 | Couleur du spotlight. Remplacez par votre couleur brand ; coordonnez aussi box-shadow, le fond du tooltip et la couleur du bouton Suivant pour un thème cohérent. |
| .tour-element.tour-active { box-shadow } | rgba(99,102,241,.25) 0 0 0 3px, rgba(99,102,241,.15) 0 0 30px | Intensité du halo. Augmentez le rayon (30px→50px) pour un spotlight plus dramatique, réduisez les opacités pour un effet discret sur une UI chargée. |
| .tour-tooltip { background } | linear-gradient(135deg, #312e81, #1e1b4b) | Fond du tooltip. Remplacez par une couleur plate ou un dégradé brand. Vérifiez le contraste de #e0e7ff (texte) sur votre nouveau fond. |
| .tour-nav .tour-next { background } | #6366f1 | Couleur du bouton Suivant/Terminer. Coordonnez-le avec border-color de l'élément actif. La couleur hover (.tour-next:hover { background: #818cf8 }) est à ajuster en parallèle. |
FAQ
getBoundingClientRect(), classList.toggle() et des transitions CSS pures. Aucune dépendance npm. Compatible Angular, React, Vue, Svelte — enveloppez la logique dans un composant ou un service, l'effet ne touche que les nœuds DOM que vous lui passez dans elements.scene, tooltip, elements, steps). Pour plusieurs instances simultanées, encapsulez chaque tour dans une fonction fabrique (IIFE ou closure) qui déclare ses propres copies locales de toutes ces variables et de showStep — aucune modification du CSS n'est nécessaire, les classes sont partagées.showStep : si r + 210 > scene.width, le tooltip bascule à gauche. Sur écrans très étroits (≤360 px), réduisez width à 160–180 px dans le CSS et mettez à jour le seuil à r + 170 > o.width dans showStep. Pour les éléments en fin de ligne (à droite de la scène), le flip gauche s'active automatiquement.
