Bootstrap 3工具提示闪烁

Question

我有一个带有工具提示的Bootstrap 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> 

Answer 2

在这里你有一个解决方案

 $('.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'); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <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> <button type='button' class='btn btn-primary' data-placement='bottom' data-title='Tooltip' data-toggle='tooltip' data-trigger='manual'>Click me</button> 

希望这个能对您有所帮助