Popovers

Visió general

Coses a saber quan s'utilitza el connector popover:

• Els popovers depenen de la biblioteca de tercers Popper per al posicionament. Heu d'incloure popper.min.js abans bootstrap.jso utilitzar-ne un bootstrap.bundle.min.jsque contingui Popper.
• Els popovers requereixen el connector popover 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.

Exemples

Activa les finestres emergents

Com s'ha esmentat anteriorment, heu d'inicialitzar les finestres emergents abans que es puguin utilitzar. Una manera d'inicialitzar totes les finestres emergents d'una pàgina seria seleccionar-les pel seu data-bs-toggleatribut, així:

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

Demo en directe

Utilitzem JavaScript semblant al fragment de més amunt per representar la següent pantalla emergent en directe. Els títols s'estableixen mitjançant data-bs-titlei el contingut del cos s'estableix mitjançant 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>

Quatre direccions

Hi ha quatre opcions disponibles: superior, dreta, inferior i esquerra. Les indicacions es reflecteixen quan s'utilitza Bootstrap a RTL. Estableix data-bs-placementper canviar la direcció.

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

Personalitzatcontainer

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. Això és comú en taules sensibles, grups d'entrada i similars.

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

Una altra situació en què voldreu establir un personalitzat explícit containersón les finestres emergents dins d'un diàleg modal , per assegurar-vos que la finestra emergent s'adjunta al modal. Això és especialment important per a les finestres emergents que contenen elements interactius: els diàlegs modals atraparan el focus, de manera que tret que el popover sigui un element secundari del modal, els usuaris no podran enfocar ni activar aquests elements interactius.

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

Popovers personalitzats

Podeu personalitzar l'aspecte de les finestres emergents mitjançant variables CSS . Vam establir una classe personalitzada amb data-bs-custom-class="custom-popover"per abastar la nostra aparença personalitzada i la fem servir per anul·lar algunes de les variables CSS locals.

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

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

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>

CSS

Les variables

Com a part de l'evolució de l'enfocament de variables CSS de Bootstrap, els popovers ara utilitzen variables CSS locals .popoverper a una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

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

Variables Sass

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

Ús

Activa les finestres emergents mitjançant JavaScript:

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

Opcions

Com que les opcions es poden passar mitjançant atributs de dades o JavaScript, podeu afegir un nom d'opció a data-bs-, com a data-bs-animation="{value}". 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, utilitzeu data-bs-custom-class="beautifier"en comptes de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, tots els components admeten un atribut de dades reservades experimentalsdata-bs-config que pot albergar una configuració senzilla de components com a cadena JSON. Quan un element té data-bs-config='{"delay":0, "title":123}'i data-bs-title="456"atributs, el titlevalor final serà 456i els atributs de dades independents substituiran els valors donats a data-bs-config. A més, els atributs de dades existents poden albergar valors JSON com data-bs-delay='{"show":0,"hide":150}'.

Utilitzant la funció ambpopperConfig

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

Mètodes

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

Esdeveniments

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