Bootstrap Tooltip - Hide when another tooltip is click

Question

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> 

Answer 1

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?

Answer 2

You need to check if the tooltip is showing and toggle its visibility manually. This is one way of doing it.

$(function() {   var HasTooltip = $('.hastooltip');   HasTooltip.on('click', function(e) {     e.preventDefault();     var isShowing = $(this).data('isShowing');     HasTooltip.removeData('isShowing');     if (isShowing !== 'true')     {       HasTooltip.not(this).tooltip('hide');       $(this).data('isShowing', "true");       $(this).tooltip('show');     }     else     {       $(this).tooltip('hide');     }    }).tooltip({     animation: true,     trigger: 'manual'   }); });