Bootstrap 3 Tooltip Flickers

I have a Bootstrap 3 button with a tooltip. When clicking the button the tooltip shows and then fades out. When clicking a 2nd time the tooltip flickers and does not nicely fade ou

Solution 1:

You should use trigger: 'manual' so you can control how the tooltip is shown or hidden.

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'manual',
  placement: 'bottom'
});

functionshowTooltip(node) {
  node.tooltip('show');
}

functionhideTooltip(node) {
  setTimeout(function() {
    node.tooltip('hide');
  }, 1000);
}

$('.btn').on('click', function() {
  var node = $(this);
  showTooltip(node);
  hideTooltip(node);
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><buttontype="button"class="btn btn-primary"data-title="Tooltip"data-toggle="tooltip">Click me</button>

Solution 2:

Here you with a solution

$('.btn').on('click', function() {
  var node = $(this);
  var msg = node.attr('data-title');
  node.attr('data-original-title', msg)
    .tooltip('show');
  setTimeout(function() {
    node.tooltip('hide');
  }, 1000);
});

$('.btn').on('mouseleave', function() {
  $(this).tooltip('hide');
});

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><buttontype='button'class='btn btn-primary'data-placement='bottom'data-title='Tooltip'data-toggle='tooltip'data-trigger='manual'>Click me</button>

Hope this will help you