Popover

Panoramica

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

• I popover si basano sulla libreria di terze parti Popper per il posizionamento. Devi includere popper.min.js prima di bootstrap.js o usare bootstrap.bundle.min.js/ bootstrap.bundle.jsche contiene Popper affinché i popover funzionino!
• I popover richiedono il plug-in del suggerimento come dipendenza.
• 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-bs-toggleattributo:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Esempio

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. Le direzioni vengono rispecchiate quando si utilizza Bootstrap in RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  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-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  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>, idealmente reso focalizzabile dalla tastiera utilizzando tabindex="0".

Per i trigger di popover disabilitati, potresti anche preferire data-bs-trigger="hover focus"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" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Variabili

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Utilizzo

Abilita i popover tramite JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, 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-bs-, come in data-bs-animation="". Assicurati di cambiare il tipo di caso del nome dell'opzione da camelCase a kebab-case quando passi le opzioni tramite attributi di dati. Ad esempio, invece di usare data-bs-customClass="beautifier", usa data-bs-custom-class="beautifier".

Utilizzo della funzione conpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metodi

mostrare

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 entrambi di lunghezza zero non vengono mai visualizzati.

myPopover.show()

nascondere

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.

myPopover.hide()

alternare

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.

myPopover.toggle()

smaltire

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

myPopover.dispose()

abilitare

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

myPopover.enable()

disattivare

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

myPopover.disable()

attiva/disattiva

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

myPopover.toggleEnabled()

aggiornare

Aggiorna la posizione del popover di un elemento.

myPopover.update()

getInstance

Metodo statico che ti consente di ottenere l'istanza popover associata a un elemento DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Metodo statico che ti consente di ottenere l'istanza popover associata a un elemento DOM o di crearne una nuova nel caso non sia stata inizializzata

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Eventi

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})