Bootstrap - Plugin Popover

O popover é semelhante à dica de ferramenta, oferecendo uma visão estendida completa com um título. Para que o popover seja ativado, o usuário só precisa passar o cursor sobre o elemento. O conteúdo do popover pode ser preenchido inteiramente usando a API Bootstrap Data. Este método requer uma dica de ferramenta.

Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do popover.jse tem uma dependência do plugin de dica de ferramenta . Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .

Uso

O plug-in popover gera conteúdo e marcação sob demanda e, por padrão, coloca o popover após seu elemento acionador. Você pode adicionar popover das duas maneiras a seguir -

  • Via data attributes - Para adicionar um popover, adicione data-toggle = "popover"a uma tag âncora / botão. O título da âncora será o texto de um popover. Por padrão, o popover é definido como superior pelo plugin.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Via JavaScript - Habilite popovers via JavaScript usando a seguinte sintaxe -

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

O plug-in Popover NÃO é apenas plug-ins css como o dropdown ou outros plug-ins discutidos nos capítulos anteriores. Para usar este plugin, você DEVE ativá-lo usando jquery (leia javascript). Para habilitar todos os popovers em sua página, basta usar este script -

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

Exemplo

O exemplo a seguir demonstra o uso do plugin popover por meio de atributos de dados.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Opções

Existem certas opções que podem ser adicionadas por meio da API Bootstrap Data ou chamadas via JavaScript. A tabela a seguir lista as opções -

Nome da Opção Tipo / valor padrão Nome do atributo de dados Descrição
animação padrão booleano - verdadeiro animação de dados Aplica uma transição de fade CSS ao popover.
html padrão booleano - falso data-html Insere HTML no popover. Se for falso, o método de texto do jQuery será usado para inserir conteúdo no dom. Use texto se estiver preocupado com ataques XSS.
colocação string | função Padrão - topo colocação de dados Especifica como posicionar o popover (ou seja, superior | inferior | esquerdo | direito | automático). Quando auto é especificado, ele reorienta dinamicamente o popover. Por exemplo, se a colocação for "esquerda automática", o popover será exibido à esquerda quando possível, caso contrário, será exibido à direita.
seletor string Padrão - falso seletor de dados Se um seletor for fornecido, os objetos popover serão delegados aos destinos especificados.
título string | função Padrão - " data-title A opção de título é o valor de título padrão se o atributo de título não estiver presente.
desencadear string Padrão - 'foco instantâneo' data-trigger Define como o popover é acionado - click| hover | focus | manual. Você pode passar vários gatilhos; separe-os com um espaço.
demora número | objeto Padrão - 0 atraso de dados

Atrasos na exibição e ocultação do popover em ms - não se aplica ao tipo de acionamento manual. Se um número for fornecido, o retardo é aplicado tanto para ocultar / mostrar. A estrutura do objeto é -

delay: { show: 500, hide: 100 }
recipiente string | falso Padrão - falso contêiner de dados Acrescenta o popover a um elemento específico. Exemplo: container: 'body'

Métodos

A seguir estão alguns métodos úteis para popover -

Método Descrição Exemplo

Options - .popover (opções)

Anexa um manipulador popover a uma coleção de elementos.
$().popover(options)

Toggle - .popover ('toggle')

Alterna o popover de um elemento.
$('#element').popover('toggle')

Show - .popover ('show')

Revela o popover de um elemento.
$('#element').popover('show')

Hide - .popover ('ocultar')

Oculta o popover de um elemento.
$('#element').popover('hide')

Destroy - .popover ('destruir')

Oculta e destrói o popover de um elemento.
$('#element').popover('destroy')

Exemplo

O exemplo a seguir demonstra os métodos do plugin popover -

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Eventos

A tabela a seguir lista os eventos para trabalhar com o plugin popover. Este evento pode ser usado para conectar-se à função.

Evento Descrição Exemplo
show.bs.popover Este evento é disparado imediatamente quando o método show instance é chamado.
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
mostrado.bs.popover Este evento é disparado quando o popover fica visível para o usuário (aguardará a conclusão das transições CSS).
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popover Este evento é disparado imediatamente quando o método de instância de ocultar é chamado.
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
escondido.bs.popover Este evento é disparado quando o popover termina de ser ocultado do usuário (irá aguardar a conclusão das transições CSS).
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Exemplo

O exemplo a seguir demonstra os eventos do plugin Popover -

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>