API Popover HTML : bac à sable interactif et référence
Bac à sable de l'API Popover HTML
API Popover HTML : popovertarget, showPopover, événements | We.Inc
Testez l'API Popover en direct : popovers auto, manual et hint, boutons popovertarget, showPopover, hidePopover et togglePopover, avec un journal des événements beforetoggle et toggle.
Ajoutez l'attribut popover à n'importe quel élément, pointez un bouton vers lui avec popovertarget="id", et le navigateur gère pour vous l'ouverture, la fermeture, le top layer et la touche Escape, sans JavaScript. Dans vos scripts, appelez showPopover(), hidePopover() ou togglePopover(), et écoutez les événements beforetoggle et toggle. popover="auto" se ferme quand vous cliquez à l'extérieur ; manual, non.
Types de popover
Valeur
Un clic à l'extérieur ou Escape le ferme
Autres popovers
popover ou popover="auto"
Oui
En ouvrir un ferme les autres popovers auto, sauf ses ancêtres
popover="manual"
Non, fermez-le vous-même
Autant que vous voulez peuvent être ouverts en même temps
popover="hint"
Oui
Ferme les autres popovers hint qui ne sont pas ses ancêtres ; prévu pour les infobulles
Un popover voulait autrefois dire une bibliothèque de positionnement, un gestionnaire de clic à l'extérieur et une bataille de z-index. L'API Popover fait passer tout cela dans le HTML. Le bac à sable ci-dessous crée un vrai popover dans votre navigateur pour que vous puissiez changer son type, le piloter depuis le code et voir les événements se déclencher dans l'ordre.
Choisissez auto, manual ou hint pour le popover du bac à sable.
Ouvrez-le avec le bouton déclaratif, ou appelez les trois méthodes avec les boutons de script.
Cliquez à l'extérieur ou appuyez sur Escape pour voir quels types se ferment d'eux-mêmes.
Lisez le journal des événements : beforetoggle se déclenche en premier, puis toggle, chacun avec oldState et newState.
Seuls les éléments button et input peuvent porter popovertarget. Utilisez un vrai bouton pour que les utilisateurs du clavier puissent l'atteindre.
popovertargetaction accepte toggle (par défaut), show ou hide, des boutons d'ouverture et de fermeture séparés ne demandent donc aucun script.
Stylez l'état ouvert avec :popover-open et assombrissez la page derrière avec ::backdrop.
Un popover n'est pas modal. Pour un formulaire à remplir avant de revenir à la page, utilisez un dialog ouvert avec showModal().
Les popovers affichés se trouvent dans le top layer, vous n'avez donc plus besoin d'un z-index élevé pour les garder au-dessus de tout.
Questions fréquentes
Quels navigateurs prennent en charge l'API Popover ?
MDN classe l'API Popover comme Baseline nouvellement disponible depuis janvier 2025, ce qui signifie qu'elle fonctionne dans les dernières versions des principaux navigateurs. Certaines parties plus récentes, comme la valeur hint, peuvent être moins bien prises en charge : consultez le tableau de compatibilité avant de vous y fier.
Quelle est la différence entre les popovers auto et manual ?
Un popover auto se ferme en douceur (light dismiss) : cliquer à l'extérieur ou appuyer sur Escape le ferme, et l'ouvrir ferme les autres popovers auto. Un popover manual reste ouvert jusqu'à ce qu'un bouton ou un script le ferme, et plusieurs peuvent être ouverts ensemble, ce qui convient aux notifications toast.
Escape ferme-t-elle tous les popovers ?
Escape ferme les popovers auto et hint, les mêmes qui se ferment sur un clic à l'extérieur. Un popover manual ignore les deux, il lui faut donc son propre bouton de fermeture ou un appel à hidePopover().
Comment savoir quand un popover s'ouvre ou se ferme ?
Écoutez l'événement toggle sur l'élément popover. Son newState vaut "open" ou "closed". L'événement beforetoggle se déclenche juste avant le changement, c'est l'endroit idéal pour préparer le contenu.
Où un popover apparaît-il par défaut ?
Au centre du viewport, en position fixe, dans le top layer. Déplacez-le avec votre propre CSS, ou avec l'anchor positioning là où le navigateur le prend en charge.
Le déclaratif d'abord
La plupart des popovers n'ont besoin d'aucun script. Le bouton et le popover sont liés par leur id, et le navigateur se charge de l'ouverture et de la fermeture, du light dismiss et de la touche Escape.
Tournez-vous vers showPopover() et ses cousines quand le déclencheur n'est pas un bouton, par exemple pour ouvrir une indication après l'échec d'une vérification de formulaire ou fermer un toast au bout d'un délai.
Menus, toasts et infobulles
Auto convient aux menus et aux sélecteurs qui doivent disparaître quand l'attention se porte ailleurs. Manual convient aux notifications qui s'empilent et restent jusqu'à leur fermeture. Hint vise les infobulles au survol et au focus.
Quel que soit le type, gardez un contenu court et assurez-vous que chaque action à l'intérieur est aussi accessible au clavier.
Référence de l'API Popover
Attributs, méthodes, événements et sélecteurs
Nom
Type
Ce qu'il fait
Attribut global
Fait de l'élément un popover : auto, manual ou hint
Attribut sur button ou input
Id du popover que le contrôle ouvre et ferme
Attribut sur button ou input
toggle (par défaut), show ou hide
showPopover()
Méthode
Ajoute le popover au top layer
hidePopover()
Méthode
Le retire du top layer et le masque
togglePopover()
Méthode
L'affiche s'il est masqué, le masque s'il est affiché
Événement
Se déclenche avant le changement d'état ; possède oldState et newState
Événement
Se déclenche après le changement d'état ; possède oldState et newState
:popover-open
Pseudo-classe CSS
Cible un popover tant qu'il est affiché
::backdrop
Pseudo-élément CSS
La couche située derrière un popover affiché
Exemples de popover sans JavaScript
Ces cadres s'exécutent avec les scripts désactivés, et les popovers fonctionnent quand même, car le comportement vient du HTML.
Un menu en popover auto
Cliquez sur le bouton, puis cliquez ailleurs ou appuyez sur Escape. Le menu se ferme tout seul.
Un toast manual avec des boutons d'affichage et de masquage séparés
Cliquer à l'extérieur n'a aucun effet ici. Seul le bouton de masquage le ferme.
Assombrir la page derrière un popover
::backdrop stylise la couche sous le popover. Il n'est toujours pas modal ; un clic sur la page derrière le ferme.
Piloter un popover depuis JavaScript
Méthodes, événements et détection de la prise en charge
Vérifiez la prise en charge avant d'appeler les méthodes, puis lisez newState dans l'événement toggle.
Bac à sable Popover
Votre navigateur exécute ici un vrai popover : changez son type, appelez ses méthodes et lisez le journal des événements.
Bouton déclaratif (popovertarget)
Méthodes de script
Je suis un popover {v}. Cliquez à l'extérieur ou appuyez sur Escape pour tester le light dismiss.
Fermer
État : {v}
Journal des événements
Vider le journal
Aucun événement pour l'instant.
Ce navigateur ne prend pas en charge l'API Popover, le bac à sable est donc désactivé.