HTMLInputElement: popoverTargetAction-Eigenschaft

Ein aufgezählter Wert. Mögliche Werte sind:

"hide"

Der Button wird ein angezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits ausgeblendetes Popover auszublenden, wird keine Aktion ausgeführt.

"show"

Der Button wird ein ausgeblendetes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button wird ein Popover zwischen angezeigt und ausgeblendet umschalten. Ist das Popover ausgeblendet, wird es angezeigt; ist das Popover angezeigt, wird es ausgeblendet. Wenn popoverTargetAction nicht gesetzt ist, ist "toggle" die Standardaktion, die durch den Steuerungsknopf ausgeführt wird.

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API mit einem auf "toggle" gesetzten Wert für die popoverTargetAction-Eigenschaft. Das popover-Attribut ist auf "auto" gesetzt, sodass das Popover durch Klicken außerhalb des Popover-Bereichs geschlossen ("light-dismissed") werden kann.

Zuerst definieren wir ein <input> vom Typ button, das wir zum Anzeigen und Ausblenden des Popovers verwenden werden, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir das HTML-Attribut popovertargetaction nicht auf den Button oder das popover-Attribut auf das <div>, da wir dies programmgesteuert vornehmen werden.

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

Der JavaScript-Code holt sich zuerst eine Referenz zu den <div>- und <input>-Elementen. Anschließend definiert er eine Funktion, um die Unterstützung für Popover zu prüfen.

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

// Check for popover API support.
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

Wenn die Popover-API unterstützt wird, setzt der Code das popover-Attribut des <div>-Elements auf "auto" und macht es zum Popover-Ziel des Umschaltknopfes. Dann setzen wir das popoverTargetAction des Buttons auf "toggle". Falls die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies zu verdeutlichen, und blenden den Umschaltknopf aus.

if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";
  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}

Sie können das untenstehende Beispiel ausprobieren. Zeigen und verbergen Sie das Popover, indem Sie den Knopf umschalten. Das "automatische" Popover kann auch durch Auswahl außerhalb der Grenzen des Popover-Textes geschlossen werden.

Dieses Beispiel zeigt, wie man die "show"- und "hide"-Werte des popoverTargetAction-Attributs verwendet.

Der Code ist nahezu identisch mit dem vorherigen Beispiel, außer dass es zwei <button>-Elemente gibt und das Popover auf "manual" gesetzt ist. Ein manual-Popover muss explizit geschlossen werden und kann nicht durch Auswahl außerhalb des Popover-Bereichs "light dismissed" werden.

<input id="showBtn" type="button" value="Show popover" />
<input id="hideBtn" type="button" value="Hide popover" />
<div id="mypopover">This is popover content!</div>

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()) {
  // Set the <div> element be a manual popover
  popover.popover = "manual";

  // Set the button targets to be the popover
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // Set the target actions to be show/hide
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = "Popover API not supported.";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}

Das Popover kann durch Auswahl des Buttons "Show popover" angezeigt und mit dem Button "Hide popover" ausgeblendet werden.

• popover HTML-Globalattribut
• Popover API