HTMLElement.hidePopover() — Methode · JavaScript-Referenz

Signatur

HTMLElement.prototype.hidePopover()

Beschreibung

hidePopover() ist das Gegenstück zu showPopover(). Die Methode schließt ein Element mit dem HTML-Attribut popover per Skript. Dabei wird das Element aus dem Top Layer entfernt und verschwindet wieder. Das ist dasselbe, was ein Button mit popovertarget="…" popovertargetaction="hide" deklarativ auslöst.

Man braucht die Methode immer dann, wenn das Schließen von Programmlogik abhängt, zum Beispiel:

Toast-Meldungen, die nach einigen Sekunden von selbst verschwinden,
Menüs, die nach der Auswahl eines Eintrags zugehen sollen,
Popover, die nach dem Absenden eines Formulars oder einer erfolgreichen fetch-Anfrage geschlossen werden.

Beim Schließen feuert der Browser zuerst das Ereignis beforetoggle mit newState: "closed" und danach asynchron toggle. Beim Verbergen lässt sich beforetoggle nicht abbrechen. Ist das Popover vom Typ popover="auto", schließt der Aufruf auch alle darin verschachtelten Kind-Popover.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Ob das Popover gerade offen ist, prüft man mit element.matches(':popover-open').

Beispiele

Popover per Button schließen

// HTML: <div id="info" popover>Hinweistext <button id="close">Schließen</button></div>
const info = document.getElementById('info');
const closeBtn = document.getElementById('close');

info.showPopover();

closeBtn.addEventListener('click', () => {
  info.hidePopover();
  console.log('Offen?', info.matches(':popover-open'));
});

Offen? false

Toast-Meldung, die sich selbst schließt

// HTML: <div id="toast" popover="manual"></div>
const toast = document.getElementById('toast');

const showToast = (text, dauer = 3000) => {
  toast.textContent = text;
  toast.showPopover();
  setTimeout(() => {
    // Nur schließen, wenn es noch offen ist
    if (toast.matches(':popover-open')) toast.hidePopover();
  }, dauer);
};

showToast('Gespeichert!');

Nach erfolgreichem Speichern schließen und auf toggle reagieren

// HTML: <form id="dialog" popover><input name="name"><button>Senden</button></form>
const form = document.getElementById('dialog');

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

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const res = await fetch('/api/save', {
    method: 'POST',
    body: new FormData(form)
  });
  if (res.ok) form.hidePopover();
});

Zustand: open → closed

Menü nach Auswahl schließen (mit Feature-Erkennung)

// HTML: <ul id="menu" popover><li data-action="copy">Kopieren</li></ul>
const menu = document.getElementById('menu');
const supportsPopover = typeof HTMLElement.prototype.hidePopover === 'function';

menu.addEventListener('click', (e) => {
  const item = e.target.closest('[data-action]');
  if (!item) return;
  console.log('Aktion:', item.dataset.action);
  if (supportsPopover) menu.hidePopover();
  else menu.hidden = true; // Fallback für ältere Browser
});

Aktion: copy

// Wichtig · Fallstricke

Ausnahmen: Fehlt dem Element das Attribut popover, wirft der Aufruf eine DOMException vom Typ NotSupportedError. Ältere Browserversionen haben außerdem einen InvalidStateError geworfen, wenn das Popover schon geschlossen war. Deshalb vorher mit el.matches(':popover-open') prüfen oder den Aufruf in try/catch legen.
Das Ereignis beforetoggle lässt sich beim Schließen nicht mit preventDefault() verhindern, das geht nur beim Öffnen.
Bei popover="auto" schließt der Browser das Popover auch selbst, etwa bei Klick außerhalb („light dismiss“) oder mit der Esc-Taste. Soll es nur über hidePopover() zugehen, verwendet man popover="manual".
Das Ereignis toggle wird asynchron ausgelöst. Direkt nach dem Aufruf ist der Zustand schon closed, der Listener für toggle hat aber noch nicht reagiert.
Browser-Unterstützung: Seit 2024 in allen aktuellen Browsern verfügbar (Firefox erst ab Version 125). Für ältere Umgebungen per Feature-Erkennung prüfen oder ein Polyfill nutzen.
Barrierefreiheit: Nach dem Schließen gibt der Browser den Fokus an das auslösende Element zurück, allerdings nur, wenn das Popover deklarativ (über popovertarget) oder mit einer source-Option geöffnet wurde. Sonst den Fokus selbst setzen.

Siehe auch

HTMLElement.showPopover() HTMLElement.togglePopover() HTMLElement.popover ToggleEvent HTMLDialogElement.close()