Tooltip Bootstrap 3 disappear when I click another

Asked

Viewed 693 times

1

I have 3 tooltips. I want them to appear in the click, so I used the following:

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

So when I click on the first one, for example, it displays the tooltip.

However, I want when I click on a tooltip it activates it and disables others who are active.

Someone knows how to help me?

javascript jquery css bootstrap

  • Separate your Tooltip call by id from the button. So you make sure that only one is called.

  • You can show an example in case I have 3 tooltips?

2 answers

4


Follows another alternative solution, showing the tooltips manually

Whenever the click event of an element that has tooltip is triggered, it hides all visible tooltips and shows only the tooltip of the element clicked.

Follows a fiddle with a functional example: https://jsfiddle.net/mathiasfcx/rha7ppu7/5/

  • Solved my problem, worked perfectly ;) +100 Hugs

4

You must close all other tooltips and open only what you clicked.

With this 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>

All it would take is one phone call to behave as you said:

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

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

Follow this example link: http://jsfiddle.net/vFDSZ/526/

  • Thank you very much, friend!

Browser other questions tagged javascript jquery css bootstrap

You are not signed in. Login or sign up in order to post.