O Popover Plugin
O Popover plugin é semelhante a dicas de ferramentas; é uma caixa de 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: Plugins podem ser incluídos individualmente (usando Bootstrap's individuais "popover.js" arquivo), ou todos de uma vez (usando "bootstrap.js" ou "bootstrap.min.js" ).
Como criar um Popover
Para criar um popover , adicione a data-toggle="popover" atributo para um elemento.
Use o title atributo para especificar o texto do cabeçalho do popover, e usar a data-content atributo para especificar o texto que deve ser exibido dentro da popover's corpo:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Nota: Popovers deve ser inicializado com jQuery: selecione o elemento específico e chamar o popover() método.
O código a seguir permitirá que todos os popovers no documento:
Exemplo
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Tente você mesmo " posicionamento Popovers
Por padrão, o popover aparece no lado direito do elemento.
Use a data-placement atributo para definir a posição do popover em cima, em baixo, à 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>
Tente você mesmo " Dica: Você também pode usar o atributo-posicionamento de dados com um valor de "auto" , que permitirá que o navegador decidir a posição do popover . Por exemplo, se o valor for "auto left" , o popover será exibido no lado esquerdo quando possível, caso contrário, à direita.
fechando Popovers
Por padrão, o popover é fechado quando você clicar no elemento novamente. No entanto, você pode usar o data-trigger="focus" atributo que irá 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>
Tente você mesmo " Dica: Se quiser que o popover a ser exibida quando você mover o ponteiro do mouse sobre o elemento, use o data-trigger atributo com um valor de "hover" :
Exemplo
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Tente você mesmo " Conclua Bootstrap Popover Referência
Para uma referência completa de todos os popover opções, métodos e eventos, ir ao nosso Bootstrap JS Popover Referência .