Popovers

Visió general

Coses a saber quan s'utilitza el connector popover:

• Els popovers confien en la biblioteca de tercers Popper per al posicionament. Heu d'incloure popper.min.js abans de bootstrap.js o utilitzar bootstrap.bundle.min.js/ bootstrap.bundle.jsque conté Popper perquè funcionin els popovers!
• Els popovers requereixen el connector tooltip com a dependència.
• Els popovers estan activats per raons de rendiment, de manera que els heu d'inicialitzar vosaltres mateixos .
• La longitud zero titlei contentels valors mai no mostraran un popover.
• Especifiqueu container: 'body'per evitar problemes de renderització en components més complexos (com els nostres grups d'entrada, grups de botons, etc.).
• No funcionarà activar popovers en elements ocults.
• Els popovers per .disabledo disabledelements s'han d'activar en un element d'embolcall.
• Quan s'activa des d'ancoratges que s'emboliquen a través de diverses línies, els popovers es centraran entre l'amplada total dels ancoratges. Utilitzeu .text-nowrap-lo <a>per evitar aquest comportament.
• Els popovers s'han d'amagar abans que els seus elements corresponents s'hagin eliminat del DOM.
• Els popovers es poden activar gràcies a un element dins d'un DOM ombra.

Segueix llegint per veure com funcionen els popovers amb alguns exemples.

Exemple: habiliteu les finestres emergents a tot arreu

Una manera d'inicialitzar totes les finestres emergents d'una pàgina seria seleccionar-les pel seu data-bs-toggleatribut:

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

Exemple: ús de l' containeropció

Quan tingueu alguns estils en un element pare que interfereixen amb un popover, voldreu especificar un personalitzat containerperquè l'HTML del popover aparegui dins d'aquest element.

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

Exemple

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

Quatre direccions

Hi ha quatre opcions disponibles: superior, dreta, inferior i alineada a l'esquerra. Les indicacions es reflecteixen quan s'utilitza Bootstrap a 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>

Omet al següent clic

Utilitzeu el focusdisparador per descartar les finestres emergents al següent clic de l'usuari en un element diferent de l'element de commutació.

<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'
})

Elements inhabilitats

Els elements amb l' disabledatribut no són interactius, és a dir, els usuaris no poden passar-hi el cursor ni fer-hi clic per activar una finestra emergent (o informació sobre eines). Com a solució alternativa, voldreu activar el popover des d'un embolcall <div>o <span>, idealment enfocat al teclat amb tabindex="0".

Per als activadors de popover desactivats, també podeu preferir data-bs-trigger="hover focus"que el popover aparegui com a comentari visual immediat als vostres usuaris, ja que potser no esperen fer clic en un element desactivat.

<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

Les variables

$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);

Ús

Activa les finestres emergents mitjançant JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-, com a data-bs-animation="". Assegureu-vos de canviar el tipus de cas del nom de l'opció de camelCase a kebab-case quan passeu les opcions mitjançant atributs de dades. Per exemple, en comptes d'utilitzar data-bs-customClass="beautifier", utilitzeu data-bs-custom-class="beautifier".

S'utilitza la funció ambpopperConfig

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

Mètodes

espectacle

Revela el popover d'un element. Torna a la persona que truca abans que s'hagi mostrat realment el popover (és a dir, abans shown.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover. Les finestres emergents el títol i el contingut dels quals són de longitud zero mai es mostren.

myPopover.show()

amagar

Amaga la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi amagat (és a dir, abans hidden.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover.

myPopover.hide()

alternar

Activa o desactiva la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.popovero ). hidden.bs.popoverAixò es considera una activació "manual" del popover.

myPopover.toggle()

disposar

Amaga i destrueix la finestra emergent d'un element (elimina les dades emmagatzemades a l'element DOM). Els popovers que utilitzen la delegació (que es creen amb l' selectoropció ) no es poden destruir individualment en elements activadors descendents.

myPopover.dispose()

habilitar

Ofereix la possibilitat de mostrar-se al popover d'un element. Les finestres emergents estan habilitades de manera predeterminada.

myPopover.enable()

desactivar

Elimina la possibilitat que es mostri la finestra emergent d'un element. La finestra emergent només es podrà mostrar si es torna a habilitar.

myPopover.disable()

toggleEnabled

Activa o desactiva la possibilitat de mostrar o amagar la finestra emergent d'un element.

myPopover.toggleEnabled()

actualitzar

Actualitza la posició de la finestra emergent d'un element.

myPopover.update()

getInstance

Mètode estàtic que us permet obtenir la instància emergent associada a un element DOM

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

getOrCreateInstance

Mètode estàtic que us permet obtenir la instància emergent associada a un element DOM o crear-ne una de nova en cas que no s'hagi inicialitzat

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

Esdeveniments

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