Popovers

Visión xeral

Cousas que debes saber ao usar o complemento popover:

• Os popovers dependen da biblioteca de terceiros Popper para o posicionamento. Debes incluír popper.min.js antes bootstrap.jsou usar un bootstrap.bundle.min.jsque conteña Popper.
• Os popovers requiren o complemento popover como dependencia.
• Os popovers están activados por motivos de rendemento, polo que debes inicializalos vostede mesmo .
• A lonxitude cero titlee contentos valores nunca mostrarán un popover.
• Especifique container: 'body'para evitar problemas de renderizado en compoñentes máis complexos (como os nosos grupos de entrada, grupos de botóns, etc.).
• Non funcionará activar popovers en elementos ocultos.
• Os popovers para .disabledou disabledelementos deben activarse nun elemento de envoltura.
• Cando se activan desde áncoras que envolven varias liñas, os popovers centraranse entre o ancho total das áncoras. Use .text-nowrapno seu <a>s para evitar este comportamento.
• Os popovers deben ocultarse antes de que se eliminen do DOM os seus elementos correspondentes.
• Os popovers pódense activar grazas a un elemento dentro dun DOM en sombra.

Continúa lendo para ver como funcionan os popovers con algúns exemplos.

Exemplos

Activa os popovers

Como se mencionou anteriormente, debes inicializar os popovers antes de que se poidan usar. Unha forma de inicializar todos os popovers nunha páxina sería seleccionalos polo seu data-bs-toggleatributo, así:

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

Demo en directo

Usamos JavaScript semellante ao fragmento anterior para renderizar o seguinte popover en directo. Os títulos establécense mediante data-bs-titlee o contido do corpo a través de 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>

Catro direccións

Hai catro opcións dispoñibles: arriba, dereita, inferior e esquerda. As indicacións replícanse cando se usa Bootstrap en RTL. Establecer data-bs-placementpara cambiar a dirección.

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

Personalizadocontainer

Cando teñas algúns estilos nun elemento principal que interfiran cun popover, quererás especificar un personalizado containerpara que o HTML do popover apareza nese elemento. Isto é común en táboas sensibles, grupos de entrada e similares.

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

Outra situación na que quererá establecer un personalizado explícito containerson os popovers dentro dun diálogo modal , para asegurarse de que o popover se engade ao modal. Isto é especialmente importante para os popovers que conteñen elementos interactivos: os diálogos modais atraparán o foco, polo que, a menos que o popover sexa un elemento fillo do modal, os usuarios non poderán enfocar nin activar estes elementos interactivos.

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

Popovers personalizados

Podes personalizar a aparencia dos popovers usando variables CSS . Establecemos unha clase personalizada data-bs-custom-class="custom-popover"para definir o noso aspecto personalizado e usámola para anular algunhas das variables CSS locais.

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

Descartar no seguinte clic

Use o focusdisparador para descartar popovers no seguinte clic do usuario nun elemento diferente do elemento de alternancia.

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

Elementos desactivados

Os elementos co disabledatributo non son interactivos, o que significa que os usuarios non poden pasar o rato nin facer clic neles para activar un popover (ou información sobre ferramentas). Como solución alternativa, quererá activar o popover desde un envoltorio <div>ou <span>, idealmente enfocado ao teclado usando tabindex="0".

Para os activadores de popover desactivados, tamén podes preferir data-bs-trigger="hover focus"que o popover apareza como un feedback visual inmediato para os teus usuarios, xa que quizais non esperen facer clic nun elemento desactivado.

<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

Variables

Como parte do enfoque de variables CSS en evolución de Bootstrap, os popovers agora usan variables CSS locais activadas .popoverpara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

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

Uso

Activar popovers mediante JavaScript:

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

Opcións

Como as opcións se poden pasar a través de atributos de datos ou JavaScript, pode engadir un nome de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar o tipo de maiúsculas e minúsculas do nome da opción de " camelCase " a " kebab-case " ao pasar as opcións a través dos atributos de datos. Por exemplo, use data-bs-custom-class="beautifier"no canto de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos os compoñentes admiten un atributo de datos reservados experimentaisdata-bs-config que pode albergar unha configuración sinxela de compoñentes como cadea JSON. Cando un elemento ten data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"atributos, o titlevalor final será 456e os atributos de datos separados anularán os valores indicados en data-bs-config. Ademais, os atributos de datos existentes poden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

Usando a función conpopperConfig

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

Métodos

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

Eventos

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