L’API Popover
Créez des info-bulles et des boîtes de dialogue avec l’attribut natif `popover`.
L’API Popover est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Fonctionnement de l’API Popover
L’API Popover offre au HTML un moyen natif de créer des fenêtres contextuelles, des boîtes de dialogue, des infobulles et des menus, sans JavaScript manuel pour le positionnement, la gestion du focus, la fermeture au clic extérieur ou la fermeture avec Échap. Le comportement intégré correspond aux attentes des utilisateurs.
L’attribut popover
Ajoutez popover à n’importe quel élément pour en faire une fenêtre contextuelle. Elle est masquée par défaut. Un bouton déclencheur doté de popovertarget="popover-id" l’affiche au clic. Le navigateur gère automatiquement son état d’ouverture et de fermeture.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Modes des fenêtres contextuelles
popover="auto" (par défaut) : fermeture au clic extérieur ou avec Échap ; une seule fenêtre contextuelle automatique peut être ouverte à la fois. popover="manual" : aucune fermeture automatique ; elle doit être fermée explicitement via JS ou un autre déclencheur.
Boutons déclencheurs
L’attribut popovertarget relie un bouton à une fenêtre contextuelle grâce à son identifiant. Le navigateur gère le comportement de basculement : cliquez sur le bouton pour l’afficher, cliquez de nouveau ou cliquez à l’extérieur pour la fermer. Aucun gestionnaire d’événement n’est nécessaire pour l’utilisation de base.
Rendu dans la couche supérieure
Les fenêtres contextuelles sont rendues dans la couche supérieure, au-dessus de tout autre contenu, quels que soient le z-index ou le contexte d’empilement. Cela élimine le problème classique de la « fenêtre modale masquée derrière un parent doté de overflow:hidden », qui affecte les fenêtres contextuelles créées manuellement.
Affichage et masquage programmatiques
JavaScript peut afficher ou masquer les fenêtres contextuelles : element.showPopover(), element.hidePopover(), element.togglePopover(). La sémantique est la même que pour le déclencheur déclaratif ; la fermeture au clic extérieur continue de fonctionner en mode automatique.
Événement toggle
Les fenêtres contextuelles déclenchent un événement toggle lorsque leur état change. La valeur newState de l’événement est « open » ou « closed ». C’est utile pour l’analyse, la gestion du focus ou la coordination d’autres éléments de l’interface avec l’état d’ouverture de la fenêtre contextuelle.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});Pseudo-classe CSS
La pseudo-classe :popover-open correspond aux fenêtres contextuelles ouvertes. Fondez les transitions, l’opacité et les transformations sur cet état : [popover]:popover-open { opacity: 1; transform: none; }.
Positionnement par ancrage
Combinées à l’API CSS de positionnement par ancrage, les fenêtres contextuelles peuvent être positionnées automatiquement par rapport à leur déclencheur, sans JavaScript pour le cas classique de l’infobulle placée près du bouton. Ces deux fonctionnalités s’inscrivent dans la même tendance moderne vers des primitives d’interface utilisateur.
Accessibilité
Le navigateur confine le focus pour les fenêtres contextuelles modales, restaure le focus sur le déclencheur lors de la fermeture et annonce l’état d’ouverture de la fenêtre aux lecteurs d’écran. Reproduire cela manuellement nécessite beaucoup de code ARIA ; l’API Popover le fournit gratuitement.
Compatibilité des navigateurs
Chrome et Safari prennent en charge l’API Popover ; Firefox l’a prise en charge plus récemment. Pour une compatibilité plus large, une petite couche de compatibilité existe. Les nouveaux projets peuvent utiliser l’implémentation native et proposer une amélioration progressive pour les navigateurs plus anciens.
Remplacer les anciennes approches
De nombreuses bibliothèques JS de fenêtres modales, comme sweetalert ou react-modal, existent principalement pour contourner ce que l’API Popover fait désormais nativement. Prévoyez une migration : paquets plus légers, meilleurs comportements par défaut et moins de code à maintenir. L’API Popover est l’une des améliorations les plus importantes apportées au HTML depuis des années.
Vérification des connaissances
Que fait popover="auto" que popover="manual" ne fait pas ?
Résumé
L’API Popover ajoute l’attribut popover, ainsi que les méthodes showPopover/hidePopover/togglePopover en JS, la liaison des déclencheurs via popovertarget, le rendu dans la couche supérieure au-dessus de tous les contextes d’empilement, la pseudo-classe :popover-open et les événements toggle. Le mode automatique ferme la fenêtre au clic extérieur ; le mode manuel exige une fermeture explicite. Cette API remplace la plupart des bibliothèques personnalisées de fenêtres modales ou d’infobulles par une primitive HTML qui gère correctement l’accessibilité, le focus et le z-index.
Questions Fréquemment Posées
La leçon « L’API Popover » est-elle gratuite ?
Oui — le texte complet de « L’API Popover » 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 « L’API Popover » ?
Créez des info-bulles et des boîtes de dialogue avec l’attribut natif `popover`. 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 2 sur 4.
Combien de temps prend la leçon « L’API Popover » ?
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
- DOM d’ombre déclaratif
- L’API Popover
- L’élément `selectlist`
- Déclencheurs d’intérêt et attribut `command`