Plugin Popover Bootstrap
O Plugin Popover
O plugin Popover é semelhante às dicas de ferramentas; é uma caixa pop-up que aparece quando o usuário clica em um elemento. A diferença é que o popover pode conter muito mais conteúdo.
Dica: Os plug- ins podem ser incluídos individualmente (usando o arquivo "popover.js" individual do Bootstrap) ou todos de uma vez (usando "bootstrap.js" ou "bootstrap.min.js").
Como criar um popover
Para criar um popover, adicione o data-toggle="popover"
atributo a um elemento.
Use o titleatributo para especificar o texto do cabeçalho do popover e use o data-contentatributo para especificar o texto que deve ser exibido dentro do corpo do popover:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Nota: Os popovers devem ser inicializados com jQuery: selecione o elemento especificado e chame o popover()método.
O código a seguir habilitará todos os popovers no documento:
Exemplo
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Posicionando Popovers
Por padrão, o popover aparecerá no lado direito do elemento.
Use o data-placementatributo para definir a posição do popover na parte superior, inferior, esquerda ou direita do elemento:
Exemplo
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Dica: Você também pode usar o atributo data-placement com um valor de "auto", que permitirá que o navegador decida a posição do popover. Por exemplo, se o valor for "auto esquerda", o popover será exibido no lado esquerdo quando possível, caso contrário, no lado direito.
Fechando Popovers
Por padrão, o popover é fechado quando você clica novamente no elemento. No entanto, você pode usar o data-trigger="focus"atributo que fechará o popover ao clicar fora do elemento:
Exemplo
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Dica: Se você quiser que o popover seja exibido ao mover o ponteiro do mouse sobre o elemento, use o data-triggeratributo com o valor "hover":
Exemplo
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Referência Completa de Bootstrap Popover
Para uma referência completa de todas as opções, métodos e eventos de popover, acesse nossa Referência de Bootstrap JS Popover .