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>

↰ Previous page Next page ↱