Source

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.

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.

È richiesto un markup specifico per l'eliminazione al clic successivo

Per un corretto comportamento cross-browser e multipiattaforma, devi utilizzare il <a>tag, non il <button>tag, e devi anche includere un tabindexattributo.

Popover ignorabile 
<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="".

Nome Tipo Predefinito Descrizione
animazione booleano VERO Applica una transizione di dissolvenza CSS al popover
contenitore stringa | elemento | falso falso

Aggiunge il popover a un elemento specifico. Esempio: container: 'body'. Questa opzione è particolarmente utile in quanto consente di posizionare il popover nel flusso del documento vicino all'elemento di attivazione, impedendo che il popover si allontani dall'elemento di attivazione durante il ridimensionamento della finestra.
contenuto stringa | elemento | funzione ''

Valore di contenuto predefinito se data-contentl'attributo non è presente.

Se viene fornita una funzione, verrà chiamata con il suo thisriferimento impostato all'elemento a cui è collegato il popover.
ritardo numero | oggetto 0

Ritardo che mostra e nasconde il popover (ms) - non si applica al tipo di trigger manuale

Se viene fornito un numero, il ritardo viene applicato a entrambi nascondi/mostra

La struttura dell'oggetto è:delay: { "show": 500, "hide": 100 }
html booleano falso Inserisci HTML nel popover. Se false, il textmetodo di jQuery verrà utilizzato per inserire contenuto nel DOM. Usa il testo se sei preoccupato per gli attacchi XSS.
posizionamento stringa | funzione 'Giusto'

Come posizionare il popover - auto | in alto | in basso | sinistra | Giusto.
Quando autoè specificato, riorienterà dinamicamente il popover.

Quando una funzione viene utilizzata per determinare il posizionamento, viene chiamata con il nodo DOM popover come primo argomento e il nodo DOM dell'elemento di attivazione come secondo. Il thiscontesto è impostato sull'istanza popover.
selettore stringa | falso falso Se viene fornito un selettore, gli oggetti popover verranno delegati alle destinazioni specificate. In pratica, questo viene utilizzato per consentire al contenuto HTML dinamico di aggiungere popover. Vedi questo e un esempio informativo .
modello corda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML di base da utilizzare durante la creazione del popover.

I popover titleverranno iniettati nel file .popover-header.

I popover contentverranno iniettati nel file .popover-body.

.arrowdiventerà la freccia del popover.

L'elemento wrapper più esterno dovrebbe avere la .popoverclasse.
titolo stringa | elemento | funzione ''

Valore del titolo predefinito se titlel'attributo non è presente.

Se viene fornita una funzione, verrà chiamata con il suo thisriferimento impostato all'elemento a cui è collegato il popover.
grilletto corda 'clic' Come viene attivato il popover - fare clic su | passa il mouse | messa a fuoco | Manuale. Puoi passare più trigger; separali con uno spazio. manualnon può essere combinato con nessun altro trigger.
compensare numero | corda 0 Offset del popover rispetto al suo target. Per ulteriori informazioni, fare riferimento ai documenti di offset di Popper.js .
posizionamento di fallback stringa | Vettore 'Flip' Consenti di specificare quale posizione utilizzerà Popper in fallback. Per ulteriori informazioni, fare riferimento ai documenti sul comportamento di Popper.js
confine stringa | elemento 'scorri Genitore' Limite del vincolo di overflow del popover. Accetta i valori di 'viewport', 'window', 'scrollParent'o un riferimento HTMLElement (solo JavaScript). Per ulteriori informazioni, fare riferimento ai documenti preventOverflow di Popper.js .

Attributi dei dati per i singoli popover

Le opzioni per i singoli popover possono essere specificate in alternativa tramite l'uso di attributi di dati, come spiegato sopra.

Metodi

Metodi e transizioni asincrone

Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .

Consulta la nostra documentazione JavaScript per ulteriori informazioni.

$().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

Tipo di evento Descrizione
show.bs.popover Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza.
mostrato.bs.popover Questo evento viene attivato quando il popover è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
nascondi.bs.popover Questo evento viene generato immediatamente quando hideviene chiamato il metodo dell'istanza.
popover.bs.nascosto Questo evento viene attivato quando il popover ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
inserito.bs.popover Questo evento viene attivato dopo l' show.bs.popoverevento quando il modello popover è stato aggiunto al DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})