Modèles concrets : info-bulles et suivi d’état
Utilisez `data-*` pour les info-bulles, les états actifs et la configuration des composants.
Modèles concrets : info-bulles et suivi d’état est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Infobulle avec data-tooltip
Stockez le texte de l’infobulle dans data-tooltip sur l’élément déclencheur. Le CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } l’affiche sans JavaScript. Pour rendre les infobulles accessibles, ajoutez role="tooltip" et aria-describedby en les faisant pointer vers un élément réel.
Positionner les infobulles CSS
L’élément déclencheur a besoin de position: relative. Le pseudo-élément ::after utilise position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) pour centrer l’infobulle au-dessus de l’élément déclencheur. Ajoutez white-space: nowrap pour empêcher le retour à la ligne.
Suivre l’état avec data-state
Remplacez plusieurs classes booléennes (is-open, is-loading, is-error) par un seul attribut data-state : el.dataset.state = "loading". Le CSS cible [data-state="loading"] — un attribut, une règle CSS par état et aucune gestion de classes.
Accordéon avec data-expanded
Chaque élément de l’accordéon possède data-expanded="false". JavaScript le fait basculer : item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". Le CSS affiche ou masque le panneau : [data-expanded="false"] .panel { display: none; }.
État actif d’un onglet
Un conteneur d’onglets stocke l’onglet actif : data-active-tab="0". JavaScript met cette valeur à jour lors d’un clic. Le CSS peut cibler le panneau actif avec [data-active-tab="0"] #panel-0. L’état complet des onglets réside dans un seul attribut du conteneur.
Suivre l’étape d’un formulaire
Les formulaires en plusieurs étapes stockent l’étape actuelle dans data-step sur l’élément formulaire. Le CSS n’affiche que l’étape correspondante : form[data-step="2"] .step-2 { display: block; }. Les autres étapes restent masquées sans basculer les classes de chaque étape.
Motif d’état de chargement
Pour les boutons pendant les actions asynchrones : btn.dataset.state = "loading" désactive les interactions et affiche une animation de chargement via le CSS. À la fin, définissez btn.dataset.state = "idle". Un seul attribut remplace trois basculements de classes distincts et une vérification de l’attribut disabled.
Motif de poignée de glissement
Marquez les éléments déplaçables avec data-draggable="true" et les cibles de dépôt avec data-droptarget="true". Les écouteurs d’événements utilisent des sélecteurs d’attributs pour trouver tous les éléments déplaçables : document.querySelectorAll("[data-draggable]"). La présence d’un attribut exprime plus clairement l’intention comportementale que les noms de classes.
Indicateur de progression
Un composant d’étapes utilise data-step-status sur chaque étape : « completed », « current », « upcoming ». Le CSS applique un style distinct à chaque état. JavaScript définit l’état de chaque étape selon la position actuelle — l’état est lisible sans devoir le reproduire dans un objet d’état JavaScript.
Persistance du thème
Stockez la préférence de thème de l’utilisateur dans localStorage et appliquez-la au chargement : document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". Le CSS cible [data-theme="dark"] pour le mode sombre — la préférence est persistante et sans FOUC lorsque le script s’exécute dans <head>.
Métadonnées du contenu dynamique
Les listes générées côté serveur incluent des métadonnées dans des attributs de données : data-product-id, data-price, data-category. JavaScript les lit sans appels d’API supplémentaires pour filtrer, trier ou gérer le panier côté client à partir des données déjà générées.
Vérification des connaissances
Quel est l'avantage d'utiliser data-state="loading" plutôt que d'ajouter ou de supprimer une classe CSS ?
Résumé
Les attributs data-* permettent des pratiques puissantes et concrètes : des infobulles CSS avec content:attr(), des machines à états utilisant data-state à la place de plusieurs changements de classes, le suivi de formulaires en plusieurs étapes, la conservation du thème via documentElement.dataset et des métadonnées générées côté serveur pour les fonctionnalités côté client — le tout sans reproduire l'état JavaScript.
Questions Fréquemment Posées
La leçon « Modèles concrets : info-bulles et suivi d’état » est-elle gratuite ?
Oui — le texte complet de « Modèles concrets : info-bulles et suivi d’état » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modèles concrets : info-bulles et suivi d’état » ?
Utilisez `data-*` pour les info-bulles, les états actifs et la configuration des composants. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Modèles concrets : info-bulles et suivi d’état » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Syntaxe et conventions de nommage de `data-*`
- Accéder à `data-*` avec `dataset` en JavaScript
- Utiliser `data-*` avec les sélecteurs d’attributs CSS
- Modèles concrets : info-bulles et suivi d’état