Popovers

Visão geral

Coisas para saber ao usar o plugin popover:

• Popovers contam com a biblioteca de terceiros Popper para posicionamento. Você deve incluir popper.min.js antes bootstrap.jsde , ou usar um bootstrap.bundle.min.jsque contenha Popper.
• Popovers requerem o plugin popover como uma dependência.
• Os popovers são opcionais por motivos de desempenho, portanto, você mesmo deve inicializá-los .
• O comprimento zero titlee contentos valores nunca mostrarão um popover.
• Especifique container: 'body'para evitar problemas de renderização em componentes mais complexos (como nossos grupos de entrada, grupos de botões etc.).
• Acionar popovers em elementos ocultos não funcionará.
• Popovers para .disabledou disabledelementos devem ser acionados em um elemento wrapper.
• Quando acionados a partir de âncoras que envolvem várias linhas, os popovers serão centralizados entre a largura total das âncoras. Use .text-nowrapem seus <a>s para evitar esse comportamento.
• Os popovers devem ser ocultados antes que seus elementos correspondentes sejam removidos do DOM.
• Popovers podem ser acionados graças a um elemento dentro de um shadow DOM.

Continue lendo para ver como os popovers funcionam com alguns exemplos.

Exemplos

Ativar popovers

Como mencionado acima, você deve inicializar os popovers antes que eles possam ser usados. Uma maneira de inicializar todos os popovers em uma página seria selecioná-los pelo data-bs-toggleatributo, assim:

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

Demonstração ao vivo

Usamos JavaScript semelhante ao snippet acima para renderizar o seguinte popover ao vivo. Os títulos são definidos por meio de data-bs-titlee o conteúdo do corpo é definido por meio 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>

Quatro direções

Quatro opções estão disponíveis: superior, direita, inferior e esquerda. As direções são espelhadas ao usar o Bootstrap em RTL. Defina data-bs-placementpara mudar a direção.

<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

Quando você tiver alguns estilos em um elemento pai que interferem com um popover, você desejará especificar um personalizado containerpara que o HTML do popover apareça dentro desse elemento. Isso é comum em tabelas responsivas, grupos de entrada e similares.

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

Outra situação em que você deseja definir um personalizado explícito containersão os popovers dentro de uma caixa de diálogo modal , para garantir que o próprio popover seja anexado ao modal. Isso é particularmente importante para popovers que contêm elementos interativos – os diálogos modais interceptarão o foco, portanto, a menos que o popover seja um elemento filho do modal, os usuários não poderão focar ou ativar esses elementos interativos.

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

Popovers personalizados

Você pode personalizar a aparência dos popovers usando variáveis ​​CSS . Definimos uma classe personalizada com data-bs-custom-class="custom-popover"o escopo de nossa aparência personalizada e a usamos para substituir algumas das variáveis ​​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>

Dispensar no próximo clique

Use o focusgatilho para dispensar popovers no próximo clique do usuário em um elemento diferente do elemento de alternância.

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

Elementos com o disabledatributo não são interativos, o que significa que os usuários não podem passar o mouse ou clicar neles para acionar um popover (ou dica de ferramenta). Como solução alternativa, você desejará acionar o popover de um wrapper <div>ou <span>, idealmente focado no teclado usando tabindex="0".

Para gatilhos de popover desativados, você também pode preferir data-bs-trigger="hover focus"que o popover apareça como feedback visual imediato para seus usuários, pois eles podem não esperar clicar em um elemento desativado.

<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

Variáveis

Como parte da abordagem de variáveis ​​CSS em evolução do Bootstrap, os popovers agora usam variáveis ​​CSS locais .popoverpara personalização aprimorada em tempo real. Os valores das variáveis ​​CSS são definidos por meio do Sass, portanto, a personalização do Sass também é suportada.

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

Variáveis ​​atrevidas

$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

Habilite popovers via JavaScript:

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

Opções

Como as opções podem ser passadas por meio de atributos de dados ou JavaScript, você pode anexar um nome de opção a data-bs-, como em data-bs-animation="{value}". Certifique-se de alterar o tipo de caso do nome da opção de “ camelCase ” para “ kebab-case ” ao passar as opções por meio de atributos de dados. Por exemplo, use data-bs-custom-class="beautifier"em vez de data-bs-customClass="beautifier".

A partir do Bootstrap 5.2.0, todos os componentes oferecem suporte a um atributo experimental de dados reservados data-bs-configque pode abrigar a configuração simples do componente como uma string JSON. Quando um elemento tem atributos data-bs-config='{"delay":0, "title":123}'e data-bs-title="456", o valor final titleserá 456e os atributos de dados separados substituirão os valores fornecidos em data-bs-config. Além disso, os atributos de dados existentes podem hospedar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

Usando a função compopperConfig

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