HTMLInputElement : propriété popoverTargetAction
================================================

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é **`popoverTargetAction`** de l'interface `HTMLInputElement` permet de lire et définit l'action à effectuer (`"hide"`, `"show"` ou `"toggle"`) sur un élément *popover* contrôlé par un élément `<input>` avec l'attribut `type="button"`.

Elle reflète la valeur de l'attribut HTML `popovertargetaction`.

Valeur
------

Une valeur énumérée. Les valeurs possibles sont :

`"hide"`

Le bouton masquera un *popover* affiché. Si vous essayez de masquer un *popover* déjà masqué, aucune action ne sera effectuée.

`"show"`

Le bouton affichera un *popover* masqué. Si vous essayez d'afficher un *popover* déjà affiché, aucune action ne sera effectuée.

`"toggle"`

Le bouton basculera un *popover* entre l'état visible et l'état masqué. Si le *popover* est masqué, il sera affiché ; si le *popover* est affiché, il sera masqué. Si `popoverTargetAction` n'est pas défini, `"toggle"` est l'action par défaut qui sera effectuée par le bouton de contrôle.

Exemples
--------

### L'action `toggle` avec un *popover* automatique

Cet exemple montre une utilisation simple de l'API Popover avec la valeur `toggle` pour la propriété `popoverTargetAction`. L'attribut `popover` est défini sur `"auto"`, de sorte que le *popover* peut être fermé en cliquant en dehors de la zone du *popover* (*light-dismissed*).

#### HTML

Tout d'abord, nous définissons un élément HTML `<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 le `<button>` ou l'attribut `popover` sur le `<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 `<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 le bouton comme étant le contrôle du popover
  toggleBtn.popoverTargetElement = popover;

  // Définit que le bouton peut afficher/masquer le 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 des limites de sa zone.

### L'action `show`/`hide` avec un *popover* manuel

Cet exemple montre comment utiliser les valeurs `"show"` et `"hide"` de l'attribut `popoverTargetAction`.

Le code est quasiment identique à l'exemple précédent, sauf qu'il y a deux `<button>` et que le *popover* est défini avec la valeur `"manual"`. Un *popover* manuel doit être fermé explicitement et ne peut pas être fermé simplement (*light-dismissed*) par un clic hors du *popover*.

#### HTML


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


#### JavaScript


```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const showBtn = document.getElementById("showBtn");
const hideBtn = document.getElementById("hideBtn");

const popoverSupported = supportsPopover();

if (supportsPopover()) {
  // Définit l'élément <div> comme étant un popover manuel
  popover.popover = "manual";

  // Définit les boutons comme étant les contrôles du popover
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // Définit les actions cibles comme étant afficher/masquer
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = "L'API popover n'est pas prise en charge.";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}
```


#### Résultat

Le popover peut être affiché en cliquant sur le bouton « Afficher le popover » et masqué en cliquant sur le bouton « Masquer le popover ».

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

| Specification |
| --- |
| HTML Standard # dom-popovertargetaction |

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

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

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

* L'API Popover