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 bootstrap.jso usarne uno bootstrap.bundle.min.jsche contenga Popper.
• I popover richiedono il plug -in popover 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.

Esempi

Abilita i popover

Come accennato in precedenza, è necessario inizializzare i popover prima che possano essere utilizzati. Un modo per inizializzare tutti i popover su una pagina sarebbe selezionarli in base al loro data-bs-toggleattributo, in questo modo:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Dimostrazione dal vivo

Usiamo JavaScript in modo simile allo snippet sopra per eseguire il rendering del seguente popover live. I titoli vengono impostati tramite data-bs-titlee il contenuto del corpo viene impostato tramite data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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: in alto, a destra, in basso e a sinistra. Le direzioni vengono rispecchiate quando si utilizza Bootstrap in RTL. Imposta data-bs-placementper cambiare la direzione.

<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>

Costumecontainer

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. Questo è comune nelle tabelle reattive, nei gruppi di input e simili.

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

Un'altra situazione in cui vorrai impostare una personalizzazione esplicita containersono i popover all'interno di una finestra di dialogo modale , per assicurarti che il popover stesso sia aggiunto al modale. Ciò è particolarmente importante per i popover che contengono elementi interattivi: i dialoghi modali intrappolano lo stato attivo, quindi a meno che il popover non sia un elemento figlio del modale, gli utenti non saranno in grado di mettere a fuoco o attivare questi elementi interattivi.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Popover personalizzati

Puoi personalizzare l'aspetto dei popover utilizzando le variabili CSS . Impostiamo una classe personalizzata con data-bs-custom-class="custom-popover"l'ambito del nostro aspetto personalizzato e la usiamo per sovrascrivere alcune delle variabili CSS locali.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

Variabili

Come parte dell'approccio in evoluzione delle variabili CSS di Bootstrap, i popover ora utilizzano le variabili CSS locali .popoverper una migliore personalizzazione in tempo reale. I valori per le variabili CSS vengono impostati tramite Sass, quindi anche la personalizzazione di Sass è ancora supportata.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

variabili Sas

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Utilizzo

Abilita i popover tramite JavaScript:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

Opzioni

Poiché le opzioni possono essere passate tramite attributi di dati o JavaScript, puoi aggiungere un nome di opzione a data-bs-, come in data-bs-animation="{value}". 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, utilizzare data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i componenti supportano un attributo di dati riservato sperimentaledata-bs-config che può ospitare una semplice configurazione del componente come una stringa JSON. Quando un elemento ha data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"attributi, il titlevalore finale sarà 456e gli attributi di dati separati sovrascriveranno i valori forniti su data-bs-config. Inoltre, gli attributi di dati esistenti sono in grado di ospitare valori JSON come data-bs-delay='{"show":0,"hide":150}'.

Utilizzo della funzione conpopperConfig

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

Metodi

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Eventi

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