Bootstrap tooltip requiring double click after first click

Question

I am having an issue with tooltips requiring a double click after they have been clicked once. For example I click on tooltip1, then click on tooltip2 and then click on tooltip1 again. The second time I click on tooltip1 it requires two clicks before the tooltip is displayed again.

Overall what I am looking for is a page with 4 tool tips that will display the tooltip when I click a link and only display one tooltip at a time so if one tooltip is showing, the other 3 are hidden.

An example is at https://jsfiddle.net/9656mv9w/

$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});

$(document).on('show.bs.tooltip', function() {
$('.tooltip').not(this).hide();
});

Answer 1

I had the same issue. A work around fix is to detect any open tooltips on the show event that should be closed, then trigger a click to close them.

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

//listen for the show event on any triggered elements
$('[data-toggle="tooltip"]').on('show.bs.tooltip', function() {

 //get a reference to the current element that is showing the tooltip
  var triggeredElement = $(this);

  //loop through all tooltips elements
  $('[data-toggle="tooltip"]').each(function(){

    //if they are not the currently triggered element and have a tooltip, 
    //trigger a click to close them
    if($(this) !== triggeredElement && $(this).next().hasClass('tooltip')) {
      $(this).click();
    }
  })
});