HTMLInputElement: popoverTargetElement-Eigenschaft

Wert

Ein Verweis auf ein Popover-Element im DOM.

Beispiele

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("Popover API not supported.");
}

Umschaltbare Popover-Aktion mit einem automatischen Popover

Dieses Beispiel zeigt die grundlegende Nutzung der Popover-API, indem ein <div>-Element als Popover festgelegt wird und es dann als popoverTargetElement eines <input>-Elements vom type="button" festgelegt wird. Das popover-Attribut ist auf "auto" gesetzt, sodass das Popover durch Klicken außerhalb des Popover-Bereichs geschlossen ("leicht verworfen") werden kann.

Zuerst definieren wir ein <input>, das wir verwenden, um das Popover anzuzeigen und zu verbergen, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir weder das popovertargetaction-HTML-Attribut auf das <input> noch das popover-Attribut auf das <div>, da wir dies programmatisch tun werden.

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

Der JavaScript-Code erhält zuerst einen Handle auf die <div>- und <input>-Elemente. Dann definiert er eine Funktion, um die Unterstützung des Popover-APIs zu überprüfen.

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

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

Falls die Popover-API unterstützt wird, setzt der Code das popover-Attribut des <div>-Elements auf "auto" und macht es zum Popover-Ziel des Umschaltbuttons. Dann setzen wir die popoverTargetAction des Buttons auf "toggle". Wenn die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies anzuzeigen, und blenden das Eingabeelement 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 Beispiel unten ausprobieren. Zeigen und verbergen Sie das Popover, indem Sie den Button umschalten. Das "auto" Popover kann auch durch Auswahl außerhalb der Grenzen des Popover-Textes leicht verworfen werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• popover HTML-Globalattribut
• Popover-API