Bootstrap 3工具提示闪烁 [英] Bootstrap 3 Tooltip flickers
本文介绍了Bootstrap 3工具提示闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个带有工具提示的Bootstrap 3按钮.单击按钮时,工具提示显示,然后淡出.第二次单击时,工具提示会闪烁,并且不会淡出.但是,当第三次单击时,行为又像预期的那样.
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 out. But when clicking the 3rd time the behavior is like expected again.
更新:以下代码适用于Bootstrap 3.0.0,但不适用于Bootstrap 3.3.7.
Update: The below code works fine with Bootstrap 3.0.0, but not with 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>
推荐答案
您应该使用trigger: 'manual'
,以便控制工具提示的显示或隐藏方式.
You should use trigger: 'manual'
so you can control how the tooltip is shown or hidden.
$('[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>
这篇关于Bootstrap 3工具提示闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文