1

Eu tenho 3 tooltips. Quero que eles apareçam no click, então usei o seguinte:

$('[data-toggle="tooltip"]').tooltip({
        trigger : 'click'
    }); 

Assim, quando eu clico no primeiro, por exemplo, ele exibe o tooltip.

Porém, quero que quando eu clique em um tooltip ele ative o mesmo e desative os outros que estiverem ativos.

Alguém sabe como me ajudar?

2
  • Separe a sua chamada do Tooltip por id do botão. Assim você garante que apenas um seja chamado. Commented 26/05/2017 às 17:54
  • Pode mostrar um exemplo seguindo o caso de eu ter 3 tooltips?
    – Tiago P.C
    Commented 26/05/2017 às 18:02

2 Respostas 2

4
+100

Segue uma outra alternativa de solução, mostrando os tooltips manualmente

Sempre que o evento de click de um elemento que tem tooltip é acionado, esconde todos os tooltips visíveis e mostra somente o tooltip do elemento clicado.

Segue um fiddle com um exemplo funcional: https://jsfiddle.net/mathiasfcx/rha7ppu7/5/

1
  • Resolveu meu problema, funcionou perfeitamente ;) +100 Abraços
    – Tiago P.C
    Commented 31/05/2017 às 13:37
4

Você deve fechar todos os outros tooltips e abrir apenas o que clicou.

Com este html:

<a class="btn"  rel='popover' data-placement='bottom' data-original-title='Teste 1' data-toggle='tooltip'>Um</a>
<a class="btn" rel='popover' data-placement='right' data-original-title='Teste 2' data-toggle='tooltip'>Dois</a>

Bastaria apenas essa chamada para se comportar como citou:

$('[data-toggle="tooltip"]').tooltip({trigger: 'click'});

$('[data-toggle="tooltip"]').on('click', function (e) {
    $('[data-toggle="tooltip"]').not(this).tooltip('hide');
});

Segue link de exemplo: http://jsfiddle.net/vFDSZ/526/

1
  • Muito obrigado, amigo!
    – Tiago P.C
    Commented 31/05/2017 às 13:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .