Atributele popover și popovertarget în HTML

<button popovertarget="info">Detalii</button>
<div id="info" popover>Conținut</div>

Ce face Atributele popover și popovertarget

Un element cu atributul popover este ascuns la început. Un <button> cu popovertarget="id-ul-popoverului" îl deschide și îl închide. Popoverul apare în stratul de sus (top layer), deasupra oricărui alt conținut, fără probleme de z-index.

Valoarea auto (implicită, ca atributul gol) se închide singură la clic în afara ei sau la tasta Escape, iar deschiderea unui alt popover auto o închide pe precedenta. Valoarea manual se închide doar prin buton sau JavaScript (hidePopover()). Atributul popovertargetaction stabilește ce face butonul: toggle (implicit), show sau hide.

API-ul este Baseline din 2024: Chrome 114, Firefox 125, Safari 17. Există și valoarea mai nouă popover="hint", pentru sfaturi care nu închid alte popovere, dar ea nu este încă suportată în Safari. Spre deosebire de <dialog> modal, un popover nu blochează restul paginii.

Atribute

Atribut	Descriere
popover / popover="auto"	Popover care se închide la clic în afară sau la Escape.
popover="manual"	Popover care se închide doar explicit, din buton sau din JavaScript.
popovertarget	Pe <button> sau <input type="button">: id-ul popoverului controlat.
popovertargetaction	toggle (implicit), show sau hide.

Exemple

Exemplul 1: Informații despre livrare într-un popover

Butonul deschide popoverul; clic în afara lui sau Escape îl închide, fără nicio linie de JavaScript.

<p>Total: 245 lei
  <button popovertarget="livrare">Cost livrare?</button>
</p>

<div id="livrare" popover>
  <p>Livrarea este gratuită în Iași pentru comenzi de peste 200 lei.</p>
</div>

Ce afișează browserul

Total: 245 lei [Cost livrare?]
La clic apare o casetă în centrul ecranului: Livrarea este gratuită în Iași pentru comenzi de peste 200 lei.
Caseta dispare la clic în afara ei sau la Escape.

Exemplul 2: Notificare manuală cu buton de închidere

Cu popover="manual", notificarea rămâne pe ecran până când utilizatorul apasă butonul cu popovertargetaction="hide".

<button popovertarget="notificare" popovertargetaction="show">Salvează</button>

<div id="notificare" popover="manual">
  <p>Profilul Anei a fost salvat.</p>
  <button popovertarget="notificare" popovertargetaction="hide">OK</button>
</div>

Ce afișează browserul

[Salvează]
După clic apare caseta: Profilul Anei a fost salvat. [OK]
Clicul în afara casetei nu o închide; doar butonul OK o ascunde.

Greșeli frecvente

• popovertarget pus pe un <div> sau pe un link. Atributul funcționează doar pe <button> și pe <input> de tip button.
• Id greșit în popovertarget (de exemplu cu diez: popovertarget="#info"). Valoarea este id-ul simplu, fără #.
• Folosirea popoverului pentru o întrebare care cere răspuns obligatoriu. Popoverul nu blochează pagina; pentru confirmări folosește <dialog> cu showModal().

Comenzi înrudite

• <dialog>: Element nativ pentru ferestre modale, pop-up-uri și alerte, cu fundal întunecat (backdrop) și închidere din tasta Escape.
• <button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.
• Atributul inert: Face o zonă a paginii complet inactivă: nu poate primi clic, focus sau selecție și este ascunsă pentru cititoarele de ecran.
• <details> și <summary>: Creează un element nativ de tip acordeon: conținutul este ascuns și se extinde doar când utilizatorul apasă pe summary.