Bootstrap 4 Popover
Bootstrap 4 Popover
Il componente 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.
Attiva/disattiva il popoverCome 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>
Nota: gli attributi di posizionamento non funzionano come previsto se non c'è abbastanza spazio per loro. Ad esempio: se utilizzi il posizionamento in alto nella parte superiore di una pagina (dove non c'è spazio per esso), verrà invece visualizzato il popover sotto l'elemento oa destra (ovunque ci sia spazio per esso).
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 .