HTMLInputElement : propriété popoverTargetElement

Baseline 2024

Nouvellement disponible

Depuis April 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La propriété popoverTargetElement de l'interface HTMLInputElement permet de lire et de définir l'élément de fenêtre contextuelle (popover en anglais) à contrôler via un élément HTML <input> avec l'attribut type="button".

Elle est l'équivalent JavaScript de l'attribut HTML popovertarget.

Établir une relation entre une fenêtre contextuelle et son bouton d'activation avec la propriété popoverTargetElement a deux effets supplémentaires utiles :

Le navigateur crée une relation implicite entre aria-details et aria-expanded entre la fenêtre contextuelle et son élément d'activation, et place la fenêtre contextuelle à une position logique dans l'ordre de navigation au clavier lors de son affichage. Cela rend la fenêtre contextuelle plus accessible aux utilisateur·ice·s du clavier et des technologies d'assistance (voir aussi Fonctionnalités d'accessibilité des fenêtres contextuelles).
Le navigateur crée une référence d'ancrage implicite entre les deux, ce qui facilite grandement le positionnement des fenêtres contextuelles par rapport à leurs contrôles à l'aide de la mise en forme d'ancrage CSS. Voir Positionnement par ancrage des fenêtres contextuelles pour plus de détails.

Dans cet article

Valeur

Une référence à un élément de fenêtre contextuelle dans le DOM.

Exemples

js
function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("L'API Popover n'est pas prise en charge.");
}

Action de basculement d'une fenêtre contextuelle avec une fenêtre contextuelle automatique

Cet exemple montre l'utilisation basique de l'API des fenêtres contextuelles, un élément <div> est défini comme fenêtre contextuelle, puis il est désigné comme popoverTargetElement d'un <input> de type="button". L'attribut popover est défini sur "auto", donc la fenêtre contextuelle peut être fermée (« fermeture légère ») en cliquant en dehors de sa zone.

Nous définissons d'abord un <input> que nous utiliserons pour afficher et masquer la fenêtre contextuelle, et un <div> qui sera la fenêtre contextuelle. Dans ce cas, nous ne définissons pas l'attribut HTML popovertargetaction sur le <input> ni l'attribut popover sur le <div>, car nous le faisons par programmation.

html
<input id="toggleBtn" type="button" value="Toggle popover" />
<div id="mypopover">This is popover content!</div>

Le code JavaScript obtient d'abord une référence vers les éléments <div> et <input>. Il définit ensuite une fonction pour vérifier la prise en charge des fenêtres contextuelles.

js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

// Vérifie la prise en charge de l'API des fenêtres contextuelles.
function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

Si l'API des fenêtres contextuelles est prise en charge, le code définit l'attribut popover de l'élément <div> sur "auto" et en fait la cible de la fenêtre contextuelle du bouton de basculement. Nous définissons ensuite la propriété popoverTargetAction du bouton sur "toggle". Si l'API des fenêtres contextuelles n'est pas prise en charge, nous modifions le contenu textuel de l'élément <div> pour l'indiquer, et masquons le champ de saisie.

js
if (supportsPopover()) {
  // Définit l'élément <div> comme fenêtre contextuelle automatique
  popover.popover = "auto";

  // Définit le bouton comme cible de la fenêtre contextuelle
  toggleBtn.popoverTargetElement = popover;

  // Définit que le bouton bascule la visibilité de la fenêtre contextuelle
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "L'API Popover n'est pas prise en charge.";
  toggleBtn.hidden = true;
}

Note : Un élément de fenêtre contextuelle est masqué par défaut, mais si l'API n'est pas prise en charge, votre élément s'affichera « comme d'habitude ».

Vous pouvez essayer l'exemple ci-dessous. Affichez et masquez la fenêtre contextuelle en basculant le bouton. La fenêtre contextuelle « automatique » peut aussi être fermée (« fermeture légère ») en cliquant en dehors du texte de la fenêtre contextuelle.

L'attibut HTML universel popover
L'API Popover

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 21 janv. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API Popover
HTMLInputElement
Propriétés d'instance
Méthodes d'instance
Évènements
Héritage
Pages liées à Popover API
Guides
1. Utilisation de l'API Popover
2. Utilisation des invocateurs d'intérêt

HTMLInputElement : propriété popoverTargetElement

Dans cet article

Valeur

Exemples

Action de basculement d'une fenêtre contextuelle avec une fenêtre contextuelle automatique

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN