Plugin Bootstrap Popover
Il plug-in Popover
Il plug-in Popover è simile ai suggerimenti; è una finestra pop-up che appare quando l'utente fa clic su un elemento. La differenza è che il popover può contenere molti più contenuti.
Suggerimento: i plug-in possono essere inclusi singolarmente (usando il singolo file "popover.js" di Bootstrap) o tutti in una volta (usando "bootstrap.js" o "bootstrap.min.js").
Come creare un popover
Per creare un popover, aggiungi l' data-toggle="popover"
attributo a un elemento.
Utilizzare l' titleattributo per specificare il testo dell'intestazione del popover e utilizzare l' data-contentattributo per specificare il testo che deve essere visualizzato all'interno del corpo del popover:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Nota: i popover devono essere inizializzati con jQuery: selezionare l'elemento specificato e chiamare il popover()metodo.
Il codice seguente abiliterà tutti i popover nel documento:
Esempio
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Posizionamento dei popover
Per impostazione predefinita, il popover apparirà sul lato destro dell'elemento.
Utilizzare l' data-placementattributo per impostare la posizione del popover sul lato superiore, inferiore, sinistro o destro dell'elemento:
Esempio
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Suggerimento: puoi anche utilizzare l'attributo data-placement con un valore di "auto", che consentirà al browser di decidere la posizione del popover. Ad esempio, se il valore è "auto a sinistra", il popover verrà visualizzato sul lato sinistro quando possibile, altrimenti a destra.
Popover di chiusura
Per impostazione predefinita, il popover viene chiuso quando si fa nuovamente clic sull'elemento. Tuttavia, puoi utilizzare l' data-trigger="focus"attributo che chiuderà il popover quando fai clic all'esterno dell'elemento:
Esempio
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Suggerimento: se si desidera visualizzare il popover quando si sposta il puntatore del mouse sull'elemento, utilizzare l' data-triggerattributo con un valore di "hover":
Esempio
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Riferimento completo di Bootstrap Popover
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi di popover, vai al nostro Bootstrap JS Popover Reference .