Accueil >Web >Référence HTML – éléments et attributs >popover – fenêtre contextuelle (attribut)

popover – fenêtre contextuelle (attribut)

<button popovertarget="help">?</button><div id="help" popover>…</div>

Un contenu contextuel : menu déroulant, aide, notification, sélection. L’élément avec popover est masqué ; un bouton avec popovertarget l’ouvre et le ferme. Ouvert, l’élément se trouve dans le top layer au-dessus de toute la page et, avec la valeur auto, se ferme avec la touche Échap ou un clic à l’extérieur – le tout sans script.

Valeurs

auto (ou valeur vide) – se ferme avec la touche Échap, un clic à l’extérieur et à l’ouverture d’une autre fenêtre auto.
manual – ne se ferme qu’avec un bouton ou un script (notifications qui doivent rester).
hint – aide qui ne ferme pas une fenêtre auto ouverte. Chrome depuis la 151, Firefox depuis la 153, Safari pas encore (état : octobre 2026).

S’applique à : tous les éléments (commande : button avec popovertarget, éventuellement popovertargetaction show, hide, toggle)
En JavaScript : element.popover, showPopover(), hidePopover(), togglePopover()

Exemples

Une aide pour un champ, ouverte par un bouton :

<label for="p-postcode">Code postal</label>
<input id="p-postcode" name="postcode" inputmode="numeric">
<button type="button" popovertarget="p-help" aria-label="Aide sur le code postal">?</button>
<div id="p-help" popover>
  <p>Cinq chiffres, par exemple 69002.</p>
</div>

L’apparence de la fenêtre ouverte – :popover-open et un fond semi-transparent :

<div id="box" popover>…</div>

[popover] {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
[popover]::backdrop {
  background: rgb(0 0 0 / 0.1);
}

Accessibilité

Le navigateur donne au bouton avec popovertarget un état déplié (aria-expanded), et à la fermeture de la fenêtre, le focus lui revient. La fenêtre elle-même n’a pas de rôle – donnez-lui-en un selon son contenu (role="menu" uniquement pour un vrai menu de commandes, sinon éventuellement aucun).

Points d’attention

Par défaut, la fenêtre est au centre de l’écran (inset: 0; margin: auto). On l’attache au bouton avec le CSS Anchor Positioning (position-anchor), que tous les navigateurs ne prennent pas encore en charge.
L’élément avec popover est masqué par display: none – une règle avec display sur le même élément l’affiche en permanence. Ne définissez le mode d’affichage qu’avec :popover-open.
Pour une fenêtre qui doit bloquer le reste de la page (confirmation de suppression), utilisez dialog avec showModal().

Prise en charge par les navigateurs

Baseline – nouvellement disponible : dans tous les navigateurs courants depuis avril 2024 ; les versions plus anciennes des navigateurs ne le prennent pas en charge. Depuis la version : Chrome 114, Firefox 125, Safari 17. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
dialog – boîte de dialogue
button – bouton
details – bloc dépliable
aria-* – attributs d’accessibilité