La Popover API
Creare tooltip e finestre di dialogo con l’attributo nativo popover
La Popover API è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Cosa fa la Popover API
La Popover API offre a HTML un modo nativo per creare popover, finestre di dialogo, tooltip e menu, senza JavaScript manuale per il posizionamento, la gestione del focus, il light-dismiss o la chiusura con Escape. Il comportamento integrato corrisponde alle aspettative degli utenti.
L'attributo popover
Aggiunga popover a qualsiasi elemento per trasformarlo in un popover. Per impostazione predefinita è nascosto. Un pulsante trigger con popovertarget="popover-id" lo mostra al clic. Il browser gestisce automaticamente lo stato di apertura e chiusura.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Modalità dei popover
popover="auto" (impostazione predefinita): applica il light-dismiss al clic esterno o alla pressione di Escape; può essere aperto un solo popover auto alla volta. popover="manual": non si chiude automaticamente; deve essere chiuso esplicitamente tramite JS o un altro trigger.
Pulsanti trigger
L'attributo popovertarget collega un pulsante a un popover tramite l'id. Il browser gestisce il comportamento di apertura e chiusura: faccia clic sul pulsante per mostrarlo, faccia nuovamente clic o faccia clic all'esterno per chiuderlo. Per l'uso di base non sono necessari gestori di eventi.
Rendering nel top layer
I popover vengono renderizzati nel top layer, sopra tutti gli altri contenuti, indipendentemente da z-index o stacking context. Questo elimina il classico bug del "modal nascosto dietro un genitore con overflow:hidden" che affligge i popover realizzati manualmente.
Apertura e chiusura programmatiche
JavaScript può mostrare o nascondere i popover: element.showPopover(), element.hidePopover(), element.togglePopover(). Le semantiche sono le stesse del trigger dichiarativo: il light-dismiss continua a funzionare per la modalità auto.
Evento toggle
I popover emettono un evento toggle quando il loro stato cambia. Il valore newState dell'evento è "open" o "closed". È utile per l'analisi, la gestione del focus o il coordinamento di altri elementi dell'interfaccia con lo stato di apertura del popover.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});Pseudo-classe CSS
La pseudo-classe :popover-open corrisponde ai popover nel loro stato aperto. Usi questo stato per definire transizioni, opacità e trasformazioni CSS: [popover]:popover-open { opacity: 1; transform: none; }.
Anchor Positioning
In combinazione con la CSS Anchor Positioning API, i popover possono essere posizionati automaticamente rispetto al loro trigger: non serve JavaScript per il classico schema del "tooltip vicino al pulsante". Entrambe le funzionalità fanno parte della stessa evoluzione verso primitive moderne per l'interfaccia utente.
Accessibilità
Il browser gestisce l'intrappolamento del focus per i popover modali, ripristina il focus sul trigger alla chiusura e comunica lo stato di apertura del popover agli screen reader. Realizzare tutto questo manualmente richiede una notevole quantità di codice boilerplate ARIA; la Popover API lo offre automaticamente.
Supporto dei browser
Chrome e Safari supportano la Popover API; Firefox ha aggiunto il supporto più recentemente. Per una compatibilità più ampia è disponibile un piccolo polyfill. I nuovi progetti possono usare l'implementazione nativa e adottare un progressive enhancement per i browser meno recenti.
Sostituire i vecchi approcci
Molte librerie JS per i modal, come sweetalert e react-modal, esistono principalmente per aggirare ciò che la Popover API ora offre nativamente. Pianifichi la migrazione: bundle più piccoli, impostazioni predefinite migliori e meno codice da mantenere. La Popover API è uno dei miglioramenti più significativi apportati a HTML negli ultimi anni.
Verifica delle conoscenze
Che cosa fa popover="auto" che popover="manual" non fa?
Riepilogo
La Popover API aggiunge l'attributo popover, oltre a showPopover/hidePopover/togglePopover in JS, il collegamento dei trigger tramite popovertarget, il rendering nel top layer al di sopra di tutti gli stacking context, la pseudo-classe :popover-open e gli eventi toggle. La modalità auto applica il light-dismiss; la modalità manual richiede una chiusura esplicita. Sostituisce la maggior parte delle librerie personalizzate per modal e tooltip con una primitiva HTML che gestisce correttamente accessibilità, focus e z-index.
Domande Frequenti
La lezione «La Popover API» è gratuita?
Sì — il testo completo di «La Popover API» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «La Popover API»?
Creare tooltip e finestre di dialogo con l’attributo nativo popover Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «La Popover API»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.