Source

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:

  • Os popovers contam com a biblioteca de terceiros Popper.js para posicionamento. Você deve incluir popper.min.js antes de bootstrap.js ou usar bootstrap.bundle.min.js/ bootstrap.bundle.jsque contém Popper.js 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.

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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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.

Marcação específica necessária para dispensar no próximo clique

Para um comportamento adequado entre navegadores e plataformas, você deve usar a <a>tag, não a <button>tag, e também deve incluir um tabindexatributo.

Popover dispensável 
<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)

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

Nome Modelo Predefinição Descrição
animação boleano verdadeiro Aplicar uma transição de fade CSS ao popover
recipiente seqüência | elemento | falso falso

Acrescenta o popover a um elemento específico. Exemplo: container: 'body'. Esta opção é particularmente útil porque permite que você posicione o popover no fluxo do documento próximo ao elemento acionador - o que impedirá que o popover flutue para longe do elemento acionador durante o redimensionamento da janela.
contente seqüência | elemento | função ''

Valor de conteúdo padrão se data-contento atributo não estiver presente.

Se uma função for fornecida, ela será chamada com sua thisreferência definida para o elemento ao qual o popover está anexado.
atraso número | objeto 0

Atraso na exibição e ocultação do popover (ms) - não se aplica ao tipo de gatilho manual

Se um número for fornecido, o atraso será aplicado tanto para ocultar/exibir

A estrutura do objeto é:delay: { "show": 500, "hide": 100 }
html boleano falso Insira o HTML no popover. Se false, o textmétodo do jQuery será usado para inserir conteúdo no DOM. Use texto se estiver preocupado com ataques XSS.
colocação seqüência | função 'certo'

Como posicionar o popover - auto | topo | inferior | esquerda | certo.
Quando autofor especificado, ele reorientará dinamicamente o popover.

Quando uma função é usada para determinar o posicionamento, ela é chamada com o nó DOM popover como seu primeiro argumento e o nó DOM do elemento acionador como seu segundo. O thiscontexto é definido para a instância popover.
seletor seqüência | falso falso Se um seletor for fornecido, os objetos popover serão delegados aos destinos especificados. Na prática, isso é usado para permitir que o conteúdo HTML dinâmico tenha popovers adicionados. Veja este e um exemplo informativo .
modelo corda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML base para usar ao criar o popover.

Os popovers titleserão injetados no arquivo .popover-header.

Os popovers contentserão injetados no arquivo .popover-body.

.arrowse tornará a seta do popover.

O elemento wrapper mais externo deve ter a .popoverclasse.
título seqüência | elemento | função ''

Valor de título padrão se o titleatributo não estiver presente.

Se uma função for fornecida, ela será chamada com sua thisreferência definida para o elemento ao qual o popover está anexado.
acionar corda 'clique' Como o popover é acionado - clique | pairar | foco | manual. Você pode passar vários gatilhos; separe-os com um espaço. manualnão pode ser combinado com nenhum outro gatilho.
Deslocamento número | corda 0 Deslocamento do popover em relação ao seu destino. Para obter mais informações, consulte os documentos de deslocamento do Popper.js .
fallbackPlace seqüência | variedade 'virar' Permite especificar qual posição o Popper usará no fallback. Para obter mais informações, consulte os documentos de comportamento do Popper.js
fronteira seqüência | elemento 'scrollParent' Limite de restrição de estouro do popover. Aceita os valores de 'viewport', 'window', 'scrollParent'ou uma referência HTMLElement (somente JavaScript). Para obter mais informações, consulte os documentos preventOverflow do Popper.js .

Atributos de dados para popovers individuais

Opções para popovers individuais podem ser especificadas alternativamente através do uso de atributos de dados, conforme explicado acima.

Métodos

Métodos e transições assíncronas

Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .

Consulte nossa documentação JavaScript para obter mais informações.

$().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 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

Tipo de evento Descrição
show.bs.popover Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrado.bs.popover Este evento é acionado quando o popover se torna visível para o usuário (aguardará a conclusão das transições CSS).
hide.bs.popover Este evento é acionado imediatamente quando o hidemétodo de instância é chamado.
oculto.bs.popover Este evento é acionado quando o popover termina de ser ocultado do usuário (aguardará a conclusão das transições CSS).
inserido.bs.popover Este evento é acionado após o show.bs.popoverevento quando o modelo popover foi adicionado ao DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})