HTML Popover API: popovertarget, showPopover, Eventi | We.Inc
Prova la Popover API dal vivo: popover auto, manual e hint, pulsanti popovertarget, showPopover, hidePopover e togglePopover, più un log degli eventi beforetoggle e toggle.
Aggiungi l'attributo popover a qualsiasi elemento e collegaci un pulsante con popovertarget="id": il browser gestisce apertura, chiusura, top layer e tasto Escape per te, senza JavaScript. Negli script chiama showPopover(), hidePopover() o togglePopover() e ascolta gli eventi beforetoggle e toggle. popover="auto" si chiude quando clicchi fuori; manual no.
Tipi di popover
Valore
Si chiude con clic esterno o Escape
Altri popover
popover o popover="auto"
Sì
Aprirne uno chiude gli altri popover auto, tranne i suoi antenati
popover="manual"
No, lo chiudi tu
Se ne possono aprire quanti vuoi insieme
popover="hint"
Sì
Chiude gli altri popover hint che non sono suoi antenati; pensato per i tooltip
Un tempo i popover significavano una libreria di posizionamento, un gestore per i clic esterni e una battaglia con lo z-index. La Popover API porta tutto questo dentro l'HTML. Il playground qui sotto crea un vero popover nel tuo browser, così puoi cambiarne il tipo, controllarlo dal codice e guardare gli eventi scattare in ordine.
Scegli auto, manual o hint per il popover nel playground.
Aprilo con il pulsante dichiarativo, oppure chiama i tre metodi con i pulsanti di script.
Clicca fuori o premi Escape per vedere quali tipi si chiudono da soli.
Leggi il log degli eventi: prima scatta beforetoggle, poi toggle, ciascuno con oldState e newState.
Solo gli elementi button e input possono avere popovertarget. Usa un vero pulsante così chi usa la tastiera può raggiungerlo.
popovertargetaction accetta toggle (predefinito), show o hide, quindi pulsanti separati di apertura e chiusura non richiedono script.
Stilizza lo stato aperto con :popover-open e scurisci la pagina dietro con ::backdrop.
Un popover non è modale. Per un modulo da completare prima di tornare alla pagina, usa un dialog aperto con showModal().
I popover visibili stanno nel top layer, quindi non ti serve più uno z-index alto per tenerli sopra a tutto il resto.
Domande frequenti
Quali browser supportano la Popover API?
MDN indica la Popover API come Baseline newly available da gennaio 2025, cioè funziona nelle ultime versioni dei principali browser. Alcune parti più recenti, come il valore hint, possono avere un supporto più limitato, quindi controlla la tabella di compatibilità prima di farci affidamento.
Qual è la differenza tra popover auto e manual?
Un popover auto supporta il light dismiss: cliccare fuori o premere Escape lo chiude, e aprirlo chiude gli altri popover auto. Un popover manual resta aperto finché un pulsante o uno script non lo chiude, e se ne possono aprire diversi insieme, cosa adatta ai toast.
Escape chiude tutti i popover?
Escape chiude i popover auto e hint, gli stessi che si chiudono con un clic esterno. Un popover manual ignora entrambi, quindi richiede un proprio pulsante di chiusura o una chiamata a hidePopover().
Come capisco quando un popover si apre o si chiude?
Ascolta l'evento toggle sull'elemento popover. Il suo newState è "open" o "closed". L'evento beforetoggle scatta subito prima del cambiamento, ed è il punto giusto per preparare il contenuto.
Dove appare un popover per impostazione predefinita?
Al centro del viewport, con posizionamento fisso, nel top layer. Spostalo con il tuo CSS, oppure con l'anchor positioning dove il browser lo supporta.
Prima di tutto, l'approccio dichiarativo
La maggior parte dei popover non richiede alcuno script. Il pulsante e il popover sono collegati tramite id, e il browser gestisce l'apertura e chiusura, il light dismiss e il tasto Escape.
Ricorri a showPopover() e ai suoi fratelli quando l'attivatore non è un pulsante, per esempio per aprire un suggerimento dopo un controllo del modulo fallito o chiudere un toast con un timer.
Menu, toast e suggerimenti
Auto è adatto a menu e selettori che devono sparire quando l'attenzione si sposta altrove. Manual è adatto a notifiche che si impilano e restano finché non vengono chiuse. Hint è pensato per i tooltip al passaggio del mouse e al focus.
Qualunque sia il tipo, mantieni il contenuto breve e assicurati che ogni azione al suo interno sia raggiungibile anche da tastiera.
Riferimento della Popover API
Attributi, metodi, eventi e selettori
Nome
Tipo
Cosa fa
Attributo globale
Trasforma l'elemento in un popover: auto, manual o hint
Attributo su button o input
Id del popover che il controllo apre e chiude
Attributo su button o input
toggle (predefinito), show o hide
showPopover()
Metodo
Aggiunge il popover al top layer
hidePopover()
Metodo
Lo rimuove dal top layer e lo nasconde
togglePopover()
Metodo
Lo mostra se è nascosto, lo nasconde se è visibile
Evento
Scatta prima del cambio di stato; ha oldState e newState
Evento
Scatta dopo il cambio di stato; ha oldState e newState
:popover-open
Pseudo-classe CSS
Corrisponde a un popover mentre è visibile
::backdrop
Pseudo-elemento CSS
Il livello dietro un popover visibile
Esempi di popover senza JavaScript
Questi riquadri girano con gli script disattivati, e i popover funzionano comunque, perché il comportamento viene dall'HTML.
Un menu con popover auto
Clicca il pulsante, poi clicca altrove o premi Escape. Il menu si chiude da solo.
Un toast manual con pulsanti separati per mostrare e nascondere
Qui cliccare fuori non fa nulla. Solo il pulsante per nascondere lo chiude.
Scurire la pagina dietro un popover
::backdrop stilizza il livello sotto il popover. Non è comunque modale; si può cliccare sulla pagina dietro per chiuderlo.
Controllare un popover da JavaScript
Metodi, eventi e rilevamento del supporto
Verifica il supporto prima di chiamare i metodi, poi leggi newState nell'evento toggle.
Playground dei popover
Qui il tuo browser esegue un vero popover: cambiane il tipo, chiamane i metodi e leggi il log degli eventi.
Pulsante dichiarativo (popovertarget)
Metodi via script
Sono un popover {v}. Clicca fuori o premi Escape per provare il light dismiss.
Chiudi
Stato: {v}
Log degli eventi
Svuota il log
Ancora nessun evento.
Questo browser non supporta la Popover API, quindi il playground è disattivato.