Popover

Documentazione ed esempi per aggiungere popover Bootstrap, come quelli che si trovano in iOS, a qualsiasi elemento del tuo sito.

Panoramica

Cose da sapere quando si utilizza il plug-in popover:

• I popover si basano sulla libreria di terze parti Popper.js per il posizionamento. Devi includere popper.min.js prima di bootstrap.js o usare bootstrap.bundle.min.js/ bootstrap.bundle.jsche contiene Popper.js affinché i popover funzionino!
• I popover richiedono il plug-in del suggerimento come dipendenza.
• Se stai creando il nostro JavaScript dal sorgente, richiedeutil.js .
• I popover sono attivabili per motivi di prestazioni, quindi devi inizializzarli tu stesso .
• Lunghezza zero titlee contentvalori non mostreranno mai un popover.
• Specificare container: 'body'per evitare problemi di rendering in componenti più complessi (come i nostri gruppi di input, gruppi di pulsanti, ecc.).
• L'attivazione dei popover sugli elementi nascosti non funzionerà.
• I popover per gli elementi .disabledo disableddevono essere attivati ​​su un elemento wrapper.
• Quando vengono attivati ​​da ancoraggi che si avvolgono su più linee, i popover verranno centrati tra la larghezza complessiva degli ancoraggi. Usa .text-nowrapsui tuoi <a>messaggi di posta elettronica per evitare questo comportamento.
• I popover devono essere nascosti prima che i loro elementi corrispondenti siano stati rimossi dal DOM.
• I popover possono essere attivati ​​grazie a un elemento all'interno di un DOM ombra.

Continua a leggere per vedere come funzionano i popover con alcuni esempi.

Esempio: abilita i popover ovunque

Un modo per inizializzare tutti i popover su una pagina sarebbe selezionarli in base al loro data-toggleattributo:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Esempio: utilizzo containerdell'opzione

Quando hai degli stili su un elemento padre che interferiscono con un popover, ti consigliamo di specificare uno stile personalizzato containerin modo che l'HTML del popover appaia invece all'interno di quell'elemento.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Esempio

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Quattro direzioni

Sono disponibili quattro opzioni: allineato in alto, a destra, in basso e a sinistra.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Ignora al prossimo clic

Utilizzare il focustrigger per ignorare i popover al successivo clic dell'utente su un elemento diverso rispetto all'elemento di attivazione/disattivazione.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Elementi disabilitati

Gli elementi con l' disabledattributo non sono interattivi, il che significa che gli utenti non possono passare il mouse o fare clic su di essi per attivare un popover (o una descrizione comando). Come soluzione alternativa, ti consigliamo di attivare il popover da un wrapper <div>o <span>e sovrascrivere l' pointer-eventselemento disabilitato.

Per i trigger di popover disabilitati, potresti anche preferire data-trigger="hover"che il popover appaia come feedback visivo immediato ai tuoi utenti poiché potrebbero non aspettarsi di fare clic su un elemento disabilitato.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Utilizzo

Abilita i popover tramite JavaScript:

$('#example').popover(options)

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-animation="".

Metodi

$().popover(options)

Inizializza i popover per una raccolta di elementi.

.popover('show')

Rivela il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato (cioè prima shown.bs.popoverche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del popover. I popover il cui titolo e contenuto sono di lunghezza zero non vengono mai visualizzati.

$('#element').popover('show')

.popover('hide')

Nasconde il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente nascosto (cioè prima hidden.bs.popoverche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del popover.

$('#element').popover('hide')

.popover('toggle')

Attiva/disattiva il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.popovero hidden.bs.popover). Questo è considerato un'attivazione "manuale" del popover.

$('#element').popover('toggle')

.popover('dispose')

Nasconde e distrugge il popover di un elemento. I popover che utilizzano la delega (che vengono creati utilizzando l' selectoropzione ) non possono essere distrutti individualmente sugli elementi trigger discendenti.

$('#element').popover('dispose')

.popover('enable')

Dà al popover di un elemento la possibilità di essere mostrato. I popover sono abilitati per impostazione predefinita.

$('#element').popover('enable')

.popover('disable')

Rimuove la possibilità di mostrare il popover di un elemento. Il popover potrà essere mostrato solo se viene riattivato.

$('#element').popover('disable')

.popover('toggleEnabled')

Attiva o disattiva la possibilità di mostrare o nascondere il popover di un elemento.

$('#element').popover('toggleEnabled')

.popover('update')

Aggiorna la posizione del popover di un elemento.

$('#element').popover('update')

Eventi

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})