La Popover API: popup, menu e tooltip nativi senza librerie

La Popover API è la risposta integrata del browser a un problema che ogni sviluppatore ha risolto a mano cento volte: mostrare un piccolo pezzo di UI - un menu, un tooltip, una scheda, una notifica - sopra tutto il resto e richiuderlo in modo pulito. Con l’attributo popover e una minuscola interfaccia JavaScript, ottieni il top layer, la chiusura leggera e la gestione di Esc gratis, senza librerie. Ecco come funziona.

Il popover più semplice

Qualsiasi elemento diventa un popover aggiungendo l’attributo popover. Un pulsante lo apre con popovertarget che punta all’id del popover:

<button popovertarget="menu">Open menu</button>

<div id="menu" popover>
  <p>I am a popover. Click outside or press Esc to close me.</p>
</div>

È tutto qui. Nessun gestore di clic, nessun z-index, nessun listener di clic esterno. Il browser renderizza il popover nel top layer (sopra l’intera pagina, senza guerre di z-index) e lo chiude con Esc o un clic esterno.

auto vs manual

Esistono due tipi di popover, e la differenza è chi li chiude:

<!-- auto: light-dismiss, only one open in a stack -->
<div id="tip" popover="auto">...</div>

<!-- manual: you open and close it yourself -->
<div id="toast" popover="manual">...</div>

Un popover auto supporta la chiusura leggera: Esc o un clic esterno lo chiude, e aprirne uno nuovo chiude il precedente nella stessa pila. Un popover manual ignora tutto ciò e resta aperto finché il tuo codice lo nasconde - la scelta giusta per un toast o un pannello persistente.

Controllarlo da JavaScript

Quando devi aprire o chiudere un popover nel codice, tre metodi fanno il lavoro, più un evento toggle per reagire ai cambi di stato:

const menu = document.getElementById("menu");
menu.showPopover();     // open it
menu.hidePopover();     // close it
menu.togglePopover();   // flip it

menu.addEventListener("toggle", (e) => {
  console.log(e.newState); // "open" or "closed"
});

C’è anche un evento beforetoggle che scatta appena prima del cambio di stato, utile per caricare contenuti in modo pigro o avviare un’animazione d’ingresso.

Stile e posizionamento

Applica stile a un popover mentre è aperto con la pseudo-classe :popover-open, e allo strato scurito dietro un popover auto con ::backdrop:

[popover]:popover-open {
  /* styles while the popover is shown */
}

[popover]::backdrop {
  /* the layer behind an auto popover */
  background: rgb(0 0 0 / 0.3);
}

Per posizionare un popover accanto al pulsante che lo ha aperto - come un vero menu a discesa - abbinalo al posizionamento con ancoraggio CSS (anchor()) invece di misurare coordinate in JavaScript. Le due funzioni sono progettate per lavorare insieme.

Quando usarla (e quando no)

Usa la Popover API per UI transitoria e sovrapposta: menu a discesa, tooltip, suggerimenti contestuali, piccole schede e notifiche. Per una finestra di dialogo modale bloccante che deve catturare il focus e fermare l’interazione con la pagina, l’elemento <dialog> resta lo strumento migliore. Consideralei complementari: popover per sovrapposizioni leggere, dialog per vere modali.

In sintesi

La Popover API trasforma un mucchio di JavaScript scritto a mano - rendering nel top layer, rilevamento del clic esterno, gestione di Esc, giochi di focus - in un singolo attributo HTML più tre metodi. Usa auto per menu e tooltip, manual per la UI che controlli, applica stile con :popover-open e combinala con il posizionamento con ancoraggio per veri menu a discesa. È supportata dai browser moderni oggi, quindi la maggior parte dei siti può adottarla senza polyfill.