#desenvolvimento

Popover customizado com Twitter Bootstrap e jQuery


Hi everybody.

Aproveitando o post anterior vamos testar o plugin Popover do Twitter Bootstrap. Seguir a documentação do Bootstrap e utilizar as formas padrões é super tranquilo. O problema acontece quando você precisa fazer algo mais customizado para atender sua necessidade, entretanto é ai que o aprendizado está como diria o Jorge Vercilo.

O comportamento padrão do popover é aparecer quando acontece um evento de HOVER e simplesmente desaparecer como um tooltip. Mas neste post iremos exigir um pouco mais do popover, fazendo com que o popover:

  • Apareça quando o acontecer um evento de clique.
  • Desapareça somente quando acontecer um evento de clique.

Teremos algo semelhante ao mostrado na imagem abaixo:

Imagem do popover aberto.

Popover aberto

Além disso vamos exibir o conteúdo de uma div dentro do popover, e está div contém um botão que abrirá um modal.

Então, vamos ao código.

Faça os passos do post anterior para preparar o seu arquivo HTML.

Dentro da tag body adicione o código abaixo:

<!-- Link que receberá o evento do popover ao ser clicado.-->
<a href="#" id="a-popover" class="btn btn-success">Abrir popover</a>
<!-- Div oculta que será exibida dentro do popover. -->
<div id="div-popover" class="hide">
   Conteúdo do popover.
   <br />
   <br />
   <!-- Botão dentro do popover responsável por abrir o modal. -->
   <button id="btn-modal" class="btn btn-primary">Abrir modal</button>
   <!-- Botão dentro do popover responsável por fechar o popover. -->
   <button id="btn-fechar" class="btn btn-danger" data-dismiss="clickover">Fechar</button>
</div>
<!-- Div oculta utilizada para montar o modal. -->
<div class="modal hide" id="div-modal">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Título modal</h3>
   </div>
   <div class="modal-body">
      Conteúdo do modal.
   </div>
   <div class="modal-footer">
     <!-- Botão dentro do modal responsável por fechar o modal. -->
     <button class="btn" data-dismiss="modal">Fechar modal</button>
   </div>
</div>

Adicione também a tag script abaixo no seu arquivo HTML.

<script type="text/javascript">
   $(document).ready(function () {
      // Associa o evento do popover ao clicar no link.
      $('#a-popover').popover({
         trigger: 'manual',
         html: true,
         title: 'Título popover',
         content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
      }).click(function (e) {
         e.preventDefault();
         // Exibe o popover.
         $(this).popover('show');
      });

      $('#btn-fechar').live('click', function (e) {
         // Oculta o popover ao clicar no botão fechar.
         $('#a-popover').popover('hide');
      });

      $('#btn-modal').live('click', function (e) {
         // Oculta o popover ao clicar no botão abrir modal.
         $('#a-popover').popover('hide');
         // Abre o modal.
         $('#div-modal').modal();
      });
   });
 </script>

Pronto, agora é só testar.

Baixe o código completo aqui.

Até breve 😉

Anúncios
Padrão

12 comentários sobre “Popover customizado com Twitter Bootstrap e jQuery

  1. Thiago disse:

    $(‘[rel=”popover”]’).popover({
    trigger: ‘hover’,
    html: true,
    delay: 200,
    });

    <div id="iconmenu" rel="popover" data-content=" Enviar foto ” data-placement=”bottom”>

  2. Thiago Gomes disse:

    Nossa que velocidade de resposta! Obrigado mesmo.
    Sou novato nisso aqui… será que fiz certo? Pois ele não apareceu como está na documentação já aberto…

    Coloquei assim

    CSS

    .show {
    display: block;
    }

    HTML

    Javascript

    $(function() {
    $(“a.pop”).popover({ animation: true, placement: ‘top’, trigger: ‘hover’ })});

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s