HTMLInputElement : propriété popoverTargetElement
=================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La propriété **`popoverTargetElement`** de l'interface `HTMLInputElement` permet de lire et définir l'élément *popover* à contrôler via un élément `<input>` avec l'attribut `type="button"`.

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

Valeur
------

Une référence vers un élément *popover* dans le DOM.

Exemples
--------

Cet exemple montre une utilisation simple l'API Popover, en définissant un élément `<div>` comme *popover*, puis en le définissant comme `popoverTargetElement` d'un `<input type="button">`. L'attribut `popover` est défini sur `"auto"`, de sorte que le *popover* peut être fermé en cliquant en dehors de sa zone (*light-dismissed*).

### HTML

Tout d'abord, nous définissons un élément HTML `<input type="button">` que nous utiliserons pour afficher et masquer le *popover*, et un `<div>` qui sera le *popover*. Dans ce cas, nous ne définissons pas l'attribut `popovertargetaction` sur l'élément `<input type="button">` ou l'attribut `popover` sur l'élément `<div>`, car nous le ferons de manière programmatique.


```html
<input id="toggleBtn" type="button" value="Afficher/masquer le popover" />
<div id="mypopover">Ceci est le contenu du popover !</div>
```

### JavaScript

Le code JavaScript récupère 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 du *popover*.


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

// Vérifie la prise en charge de l'API Popover.
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}
```


Si l'API Popover est prise en charge, le code définit l'attribut `popover` de l'élément `<div>` sur `"auto"` et en fait la cible du *popover* du bouton de basculement. Nous définissons ensuite la `popoverTargetAction` du `<input type="button">` sur `"toggle"`.

Si l'API Popover n'est pas prise en charge, nous changeons le contenu textuel de l'élément `<div>` pour indiquer cela, et masquons le bouton de basculement.


```js
if (supportsPopover()) {
  // Définit l'élément <div> comme étant un popover automatique
  popover.popover = "auto";

  // Définit la cible popover du bouton comme étant le popover
  toggleBtn.popoverTargetElement = popover;

  // Définit comment le bouton change la visibilité du popover
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "L'API Popover n'est pas prise en charge.";
  toggleBtn.hidden = true;
}
```


**Note :** Un élément *popover* est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.

### Résultat

Vous pouvez essayer l'exemple ci-après. Affichez et masquez le *popover* en activant le bouton. Un tel *popover* automatique peut également être fermé en cliquant en dehors de ses limites (*light-dismissed*).

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-popovertargetelement |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'API Popover