L'attributo popover applicato ad un elemento lo rende visibile solo se richiamato da un pulsante (button o input) che possiede l'attributo popovertarget il cui valore corrisponde all'id dell'elemento popover.
L'elemento popover, quando richiamato, si posiziona al centro della pagina sopra al contenuto, conservando, se presenti, le regole di stile applicate.
Cliccando nuovamente sul pulsante popovertarget, o su un punto qualsiasi della pagine, l'elemento popover ritorna nascosto alla vista.
L'attributo popover è un attributo globale, vale a dire che può essere applicato a qualunque tag html.
NOTA BENE: L'attributo popover non è ancora standard, quindi il validatore W3C lo segnala, al momento, come errore perchè non riconosciuto.
Applicando opportune regole di stile all'id dell'elemento popover è possibile personalizzare l'aspetto della finestra popup. Per esempio, è possibile rimuovere o modificare il border presente di default, cambiare la posizione, definire le dimensioni della finestra e i colori.
Esempio personalizzato
Popover show/hide
Il popover di base si chiude cliccando sul medesimo pulsante di apertura, ma è possibile aggiungere un pulsante di chiusura vicino a quello di apertura, o all'interno del popup stesso.
Come detto, il popover viene posizionato, di default, al centro della pagina se non diversamente indicato. Possibile porlo in una posizione diversa utilizzando opportune regole di stile.
<button popovertarget="mypopover">Show popover</button>
<div id="mypopover" popover>Io sono un popover</div>
Popover con timeout
Con poche righe di javascript potete creare un popover che si apre al caricamento della pagina e scompare in automatico dopo un tempo stabilito.
Codice di esempio: