Popover
Visualizza messaggi o informazioni a comparsa in prossimità di un altro elemento
I popover si basano sulla libreria di terze parti Popper.js.
Per fare in modo che i popover funzionino è necessario includere popper.min.js prima di
bootstrap-unito.js o usare la versione bundle che contiene già Popper.js.
I popover funzionano sia con la tastiera che per gli utenti dotati di tecnologia assistiva.
Cose da sapere quando si utilizza il plugin popover:
- I popover sono opt-in per ragioni di performance, quindi devi inizializzarli tu stesso con il codice che trovi di seguito.
- I
titlee icontentcon valori vuoti non mostreranno mai popover. - Specifica
container: 'body'per evitare problemi di rendering in componenti più complessi (come nei gruppi di input, gruppi di bottoni, etc). - Attivare i popover su elementi nascosti non funzionerà.
- I popover per gli elementi
.disabledodisableddevono essere attivati da un elemento contenitore. - Quanto attivato da ancore che si estendono su più linee, i popover verranno centrati tra la larghezza complessiva delle ancore. Usa
white-space: nowrap;sugli elementi<a>per evitare questo comportamento. - I Popover devono essere nascosti prima che i loro elementi corrispondenti siano stati rimossi dal DOM.
Abilitazione generale
Un modo per inizializzare tutti i popovers in una pagina è quello di selezionarli tramite il loro attributo data-toggle:
$(function () {
$('[data-toggle="popover"]').popover()
})Abilitazione con opzione container
Quando hai alcuni stili su un elemento genitore che interferiscono con un popover, è consigliato specificare un container personalizzato in modo che l’HTML del popover appaia invece all’interno di quell’elemento.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." data-original-title="Titolo del Popover">Clicca per attivare/disattivare il popover</button>Direzioni
Sono disponibili quattro opzioni: allineato in alto, a destra, in basso e a sinistra.
<div class="container">
<div class="row">
<div class="col-12 col-md-4"></div>
<div class="col-12 col-md-4">
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="top" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;" data-original-title="Titolo del Popover">
Popover in alto
</button>
</div>
<div class="col-12 col-md-4"></div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-4">
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="right" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;" data-original-title="Titolo del Popover">
Popover a destra
</button>
</div>
<div class="col-12 col-md-4"></div>
<div class="col-12 col-md-4 mt-4 mt-md-0">
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="left" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;" data-original-title="Titolo del Popover">
Popover a sinistra
</button>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-4"></div>
<div class="col-12 col-md-4">
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="bottom" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." style="width:100%;" data-original-title="Titolo del Popover">
Popover in basso
</button>
</div>
<div class="col-12 col-md-4"></div>
</div>
</div>
</div>
</div>Modalità Hover
Per aprire il Popover all’hover del mouse sull’elemento, aggiungere l’attributo data-trigger="hover" al tag dello stesso.
<button type="button" class="btn btn-lg btn-danger" data-trigger="hover" data-toggle="popover" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel finibus augue." data-original-title="Titolo del Popover">Apertura in hover</button>Uso tramite Javascript
$().popover(options)
Inizializza i popover per una raccolta di elementi.
.popover('show')
Mostra il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato (prima che si verifichi l’evento shown.bs.popover). Questo è considerato un’attivazione “manuale” del popover. I popover senza nè titoli nècontenuto non vengono mai visualizzati.
.popover('toggle')
Attiva/disattiva il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato o nascosto (prima che si verifichi l’evento shown.bs.popover o l’evento hidden.bs.popover). Questo è considerato un’attivazione “manuale” del popover.
.popover('dispose')
Nasconde e distrugge il popover di un elemento.
.popover('enable')
Fornisce al popover di un elemento la possibilità di essere mostrato. I popover sono abilitati in modo predefinito.
.popover('disable')
Rimuove la capacità di mostrare il popover di un elemento. Il popover potrà essere mostrato solo se è riattivato.
.popover('toggleEnabled')
Attiva/disattiva la possibilità che il popover di un elemento sia mostrato o nascosto.
.popover('update')
Aggiorna la posizione del popover di un elemento.