HTMLButtonElement.popoverTargetAction — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.popoverTargetAction

Beschreibung

Die Eigenschaft popoverTargetAction spiegelt das HTML-Attribut popovertargetaction eines <button>-Elements wider. Sie legt fest, was beim Klick auf den Button mit dem Popover geschieht, das über popovertarget bzw. popoverTargetElement verknüpft ist.

Mögliche Werte:

"toggle" (Standard): Das Popover wird abwechselnd geöffnet und geschlossen.
"show": Das Popover wird nur geöffnet. Ist es schon offen, passiert nichts.
"hide": Das Popover wird nur geschlossen. Ist es schon zu, passiert nichts.

Mit der Eigenschaft bauen Sie deklarative Popover-Steuerungen ganz ohne eigene Klick-Handler, zum Beispiel getrennte Buttons zum Öffnen und Schließen oder einen Schließen-Button innerhalb des Popovers. Weil die Eigenschaft per JavaScript veränderbar ist, können Sie das Verhalten eines Buttons auch zur Laufzeit umstellen.

Die Aktion wirkt nur, wenn der Button ein gültiges Ziel hat (ein Element mit popover-Attribut) und nicht deaktiviert ist. Außerdem gilt das nur für Buttons mit type="button" oder für Buttons außerhalb eines Formulars. Ein Submit-Button in einem Formular sendet das Formular ab und steuert kein Popover.

Parameter

Name	Typ	Default	Beschreibung
$value	"toggle" \| "show" \| "hide"	"toggle"	Neuer Wert beim Setzen. Ungültige Werte sind erlaubt, werden beim Lesen aber als `"toggle"` ausgegeben (Aufzählungsattribut mit Standardwert für fehlende und ungültige Werte).

Rückgabewert

Typ

string

Beschreibung

Einer der Werte "toggle", "show" oder "hide". Fehlt das Attribut oder ist sein Wert ungültig, lautet der Wert "toggle".

Beispiele

Getrennte Buttons zum Öffnen und Schließen

// HTML:
// <button id="open" popovertarget="info">Info zeigen</button>
// <div id="info" popover>
//   Hilfetext …
//   <button id="close" popovertarget="info">Schließen</button>
// </div>

const openBtn = document.getElementById('open');
const closeBtn = document.getElementById('close');

console.log(openBtn.popoverTargetAction); // Standardwert

openBtn.popoverTargetAction = 'show';
closeBtn.popoverTargetAction = 'hide';

console.log(closeBtn.getAttribute('popovertargetaction'));

toggle hide

Button und Popover komplett per JavaScript erzeugen

const menu = document.createElement('div');
menu.id = 'menu';
menu.popover = 'auto';
menu.textContent = 'Menüinhalt';

const btn = document.createElement('button');
btn.type = 'button';
btn.textContent = 'Menü öffnen';
btn.popoverTargetElement = menu;
btn.popoverTargetAction = 'show';

document.body.append(btn, menu);

menu.addEventListener('toggle', (e) => {
  console.log(`Popover: ${e.oldState} → ${e.newState}`);
});

Popover: closed → open (nach Klick auf den Button)

Ungültige Werte und Funktionsprüfung

const btn = document.createElement('button');

if ('popoverTargetAction' in HTMLButtonElement.prototype) {
  btn.popoverTargetAction = 'blink'; // ungültig
  console.log(btn.getAttribute('popovertargetaction'));
  console.log(btn.popoverTargetAction);
} else {
  console.log('Popover-API wird nicht unterstützt');
}

blink toggle

Aktion zur Laufzeit an den Zustand anpassen

// <button id="t" popovertarget="panel">Panel</button>
// <div id="panel" popover="manual">Panel-Inhalt</div>

const trigger = document.getElementById('t');
const panel = document.getElementById('panel');

panel.addEventListener('toggle', (e) => {
  const isOpen = e.newState === 'open';
  trigger.popoverTargetAction = isOpen ? 'hide' : 'show';
  trigger.textContent = isOpen ? 'Panel schließen' : 'Panel öffnen';
});

// Wichtig · Fallstricke

Wirkt nur mit Ziel: Ohne popovertarget bzw. popoverTargetElement oder wenn das Ziel kein popover-Attribut hat, bleibt popoverTargetAction wirkungslos.
Formulare: Innerhalb eines <form> ist ein Button ohne Angabe ein Submit-Button und steuert kein Popover. Setzen Sie deshalb type="button".
Deaktivierte Buttons (disabled) lösen keine Popover-Aktion aus.
Groß-/Kleinschreibung: Der Wert wird ohne Beachtung der Groß-/Kleinschreibung ausgewertet. Unbekannte Werte werden beim Lesen zu "toggle", das Attribut behält aber den gesetzten Text.
Kompatibilität: Die Popover-API ist seit 2024 in allen gängigen Browsern verfügbar (Chrome/Edge 114, Safari 17, Firefox 125). Ältere Browser ignorieren das Attribut. Prüfen Sie die Unterstützung mit 'popover' in HTMLElement.prototype und nutzen Sie bei Bedarf ein Polyfill.
Auch HTMLInputElement (bei type="button", "submit", "reset" oder "image") hat eine gleichnamige Eigenschaft.

Siehe auch

HTMLButtonElement.popoverTargetElement HTMLElement.popover HTMLElement.showPopover() HTMLElement.hidePopover() HTMLElement.togglePopover() HTMLButtonElement