I hope someone can help.
I'm trying to hide the tooltip when another tooltip icon is clicked. It works but when I decide to click the last tooltip again it 'flashes' the tooltip.
var Hastooltip = $('.hastooltip');
HasTooltip.on('click', function(e) {
e.preventDefault();
HasTooltip.tooltip('hide');
}).tooltip({
animation: true
}).parent().delegate('.close', 'click', function() {
HasTooltip.tooltip('hide');
});
HTML
<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
<h3>Info 1</h3>
</a>
<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
<h3>Info 2</h3>
</a>
If it helps a following markup is added to the DOM when the user clicks on the button to display the tooltip.
<div class="tooltip"</div>
This can be handled more easily than the above answers indicate. You can do this with a single line of javascript in your show handler:
$('.tooltip').not(this).hide();
Here's a complete example. Change 'element' to match your selector.
$(element).on('show.bs.tooltip', function() {
// Only one tooltip should ever be open at a time
$('.tooltip').not(this).hide();
});
The same technique is suggested for closing popovers in this SO thread:
How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?