javascript - Bootstrap 3 工具提示闪烁

Question

我有一个带有工具提示的 Bootstrap 3 按钮。单击按钮时，工具提示显示然后淡出。第二次单击时，工具提示会闪烁并且不会很好地淡出。但是当点击第 3 次时，行为再次符合预期。

更新:以下代码适用于 Bootstrap 3.0.0，但不适用于 Bootstrap 3.3.7。

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

function setTooltip(node, message) {
  node.attr('data-original-title', message)
    .tooltip('show');
}

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

$('.btn').on('click', function() {
  var node = $(this);
  var msg = node.attr('data-title');
  setTooltip(node, msg);
  hideTooltip(node);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type='button' class='btn btn-primary' data-title='Tooltip' data-toggle='tooltip'>Click me</button>

Answer 1

您应该使用 trigger: 'manual' 以便控制工具提示的显示或隐藏方式。

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

function showTooltip(node) {
  node.tooltip('show');
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="btn btn-primary" data-title="Tooltip" data-toggle="tooltip">Click me</button>