Popovers

Documentação e exemplos para adicionar popovers do Bootstrap, como os encontrados no iOS, a qualquer elemento do seu site.

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 de bootstrap.js ou usar bootstrap.bundle.min.js/ bootstrap.bundle.jsque contém Popper para que os popovers funcionem!
• Os popovers exigem o plug -in de dica de ferramenta como uma dependência.
• Se você estiver construindo nosso JavaScript a partir da fonte, ele requerutil.js .
• 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.

Exemplo: ativar popovers em todos os lugares

Uma maneira de inicializar todos os popovers em uma página seria selecioná-los por seu data-toggleatributo:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Exemplo: Usando a containeropção

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Exemplo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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: alinhamento superior, direito, inferior e alinhamento à esquerda.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</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-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  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>substituir o pointer-eventsno elemento desativado.

Para gatilhos de popover desativados, você também pode preferir data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Uso

Habilite popovers via JavaScript:

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-animation="".

Métodos

$().popover(options)

Inicializa popovers para uma coleção de elementos.

.popover('show')

Revela o popover de um elemento. Retorna ao chamador antes que o popover tenha sido realmente mostrado (ou seja, antes que o shown.bs.popoverevento ocorra). Isso é considerado um acionamento “manual” do popover. Os popovers cujo título e conteúdo são ambos de comprimento zero nunca são exibidos.

$('#element').popover('show')

.popover('hide')

Oculta o popover de um elemento. Retorna ao chamador antes que o popover tenha sido ocultado (ou seja, antes que o hidden.bs.popoverevento ocorra). Isso é considerado um acionamento “manual” do popover.

$('#element').popover('hide')

.popover('toggle')

Alterna o popover de um elemento. Retorna ao chamador antes que o popover tenha sido exibido ou ocultado (ou seja, antes que o evento shown.bs.popoverou hidden.bs.popoverocorra). Isso é considerado um acionamento “manual” do popover.

$('#element').popover('toggle')

.popover('dispose')

Esconde e destrói o popover de um elemento. Popovers que usam delegação (que são criados usando a selectoropção ) não podem ser destruídos individualmente em elementos de disparo descendentes.

$('#element').popover('dispose')

.popover('enable')

Dá ao popover de um elemento a capacidade de ser mostrado. Os popovers são ativados por padrão.

$('#element').popover('enable')

.popover('disable')

Remove a capacidade de mostrar o popover de um elemento. O popover só poderá ser exibido se for reativado.

$('#element').popover('disable')

.popover('toggleEnabled')

Alterna a capacidade de mostrar ou ocultar o popover de um elemento.

$('#element').popover('toggleEnabled')

.popover('update')

Atualiza a posição do popover de um elemento.

$('#element').popover('update')

Eventos

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})