Il Popover Plugin
Il Popover plugin è simile a descrizioni dei comandi; si tratta di una finestra pop-up che appare quando l'utente fa clic su un elemento. La differenza è che il popover può contenere molto più contenuti.
Tip: I plugin possono essere inclusi singolarmente (utilizzando Bootstrap's individuali "popover.js" di file), o tutti in una volta (usando "bootstrap.js" o "bootstrap.min.js" ).
Come creare un Popover
Per creare un popover , aggiungere il data-toggle="popover" attributo per un elemento.
Utilizzare il title attributo per specificare il testo dell'intestazione del popover, e utilizzare il data-content attributo per specificare il testo che dovrebbe essere visualizzato all'interno del popover's corpo:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Nota: Popovers devono essere inizializzati con jQuery: selezionare l'elemento specificato e chiamare il popover() metodo.
Il seguente codice consentirà a tutti popovers nel documento:
Esempio
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Prova tu stesso " posizionamento Popovers
Per impostazione predefinita, il popover apparirà sul lato destro dell'elemento.
Utilizzare il data-placement attributo per impostare la posizione del popover in alto, in basso, a sinistra oa destra 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>
Prova tu stesso " Suggerimento: È anche possibile utilizzare l'attributo data-posizionamento con un valore di "auto" , che permetterà al browser a decidere la posizione del popover . Ad esempio, se il valore è "auto left" , la popover verrà visualizzato sul lato sinistro quando possibile, altrimenti sulla destra.
Chiusura Popovers
Per impostazione predefinita, il popover è chiuso quando si fa clic sull'elemento di nuovo. Tuttavia, è possibile utilizzare il data-trigger="focus" attributo che chiuderà il popover quando si fa clic al di fuori del 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>
Prova tu stesso " Suggerimento: se si desidera che il popover da visualizzare quando si sposta il puntatore del mouse sopra l'elemento, utilizzare la data-trigger attributo con un valore di "hover" :
Esempio
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Prova tu stesso " Completare Bootstrap Popover di riferimento
Per un riferimento completo di tutte le popover opzioni, metodi ed eventi, vai alla nostra Bootstrap JS Popover di riferimento .