Visite guidée (Tour)
Composant de visite guidée pour présenter les fonctionnalités d'une application pas à pas. Met en surbrillance les éléments cibles et affiche un popover explicatif avec navigation entre les étapes.
Utilisation de base
Fonctionnalité AFonctionnalité BFonctionnalité C
<button
class="bj-btn"
data-bj-tour
data-bj-tour-steps='[
{ "target": "#feature-1", "title": "Bienvenue", "content": "Découvrez les fonctionnalités principales.", "placement": "bottom" },
{ "target": "#feature-2", "title": "Tableau de bord", "content": "Visualisez vos données en un clin d\u2019œil.", "placement": "right" },
{ "target": "#feature-3", "title": "Paramètres", "content": "Personnalisez votre expérience.", "placement": "left" }
]'
>
Démarrer la visite
</button>Classes CSS
| Classe | Description |
|---|---|
.bj-tour-overlay | Superposition couvrant la page pendant la visite |
.bj-tour-overlay__backdrop | Fond semi-transparent de l'overlay |
.bj-tour-highlight | Zone de surbrillance autour de l'élément cible |
.bj-tour-popover | Popover explicatif flottant |
.bj-tour-popover__header | En-tête du popover (titre + numéro d'étape) |
.bj-tour-popover__title | Titre de l'étape |
.bj-tour-popover__step | Indicateur du numéro d'étape |
.bj-tour-popover__body | Corps du popover (description) |
.bj-tour-popover__footer | Pied du popover (progression + actions) |
.bj-tour-popover__progress | Conteneur des points de progression |
.bj-tour-popover__progress-dot | Point de progression individuel |
.bj-tour-popover__progress-dot--active | Point de progression actif |
.bj-tour-popover__progress-dot--done | Point de progression complété |
.bj-tour-popover__actions | Conteneur des boutons Précédent / Suivant |
.bj-tour-popover__close | Bouton de fermeture du popover |
Attributs data
| Classe | Description |
|---|---|
data-bj-tour | Active le comportement visite guidée sur l'élément déclencheur |
data-bj-tour-steps | Tableau JSON décrivant les étapes de la visite |
Accessibilité
Le popover possède
role="dialog" et aria-label. Le focus est piégé dans le popover pendant la visite. Les touches Flèche droite, Flèche gauche et Échap permettent de naviguer ou fermer. Le focus est restauré à l'élément déclencheur à la fin de la visite.