title: Bootstrap Tooltip - Hide when another tooltip is click
body: <p>I hope someone can help.</p>
  
  <p>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.</p>
  
  <pre><code>var Hastooltip = $('.hastooltip');
  HasTooltip.on('click', function(e) {
       e.preventDefault();
       HasTooltip.tooltip('hide');
  }).tooltip({
       animation: true
  }).parent().delegate('.close', 'click', function() {
       HasTooltip.tooltip('hide');
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit."&gt;
      &lt;h3&gt;Info 1&lt;/h3&gt;
  &lt;/a&gt;
  
  &lt;a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit."&gt;
      &lt;h3&gt;Info 2&lt;/h3&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>If it helps a following markup is added to the DOM when the user clicks on the button to display the tooltip.</p>
  
  <pre><code>&lt;div class="tooltip"&lt;/div&gt;
  </code></pre>