showPopover / hidePopover / togglePopover în JavaScript

element.showPopover()
element.hidePopover()
element.togglePopover(forta)

Ce face showPopover / hidePopover / togglePopover

Un element cu atributul HTML popover este ascuns implicit și, când este afișat, apare deasupra întregii pagini. Cu popover="auto" (implicit) se închide singur la un clic în afară sau la Esc.

De obicei se deschide fără JavaScript, cu un buton care are popovertarget. Din cod îl controlezi cu showPopover(), hidePopover() și togglePopover(), care returnează noua stare. Evenimentul toggle anunță schimbările.

Parametri

Parametru	Descriere
forta	Opțional, la togglePopover: true afișează, false ascunde.

Ce returnează

togglePopover: true dacă a rămas afișat. Celelalte: undefined.

Exemple

Exemplul 1: Un mesaj care apare și dispare

<div id="salvat" popover>Modificările au fost salvate</div>

<script>
  const mesaj = document.getElementById("salvat");
  mesaj.addEventListener("toggle", (e) => console.log(e.newState));

  mesaj.showPopover();
  setTimeout(() => mesaj.hidePopover(), 2000);
  console.log(mesaj.matches(":popover-open"));
</script>

Rezultat în browser

true
open
closed

Greșeli frecvente

• Apelezi showPopover pe un element fără atributul popover și primești NotSupportedError.

Comenzi înrudite

• dialog.showModal / show / close: Deschide o fereastră de dialog (modală sau nu) construită cu elementul HTML <dialog> și o închide.
• classList: Adaugă, scoate sau comută clase CSS pe un element.
• addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.