Bootstrap 3工具提示闪烁
问题描述:
我有一个工具提示的Bootstrap 3按钮。点击按钮后,工具提示会显示,然后淡出。当第二次点击时,工具提示闪烁并且不能很好地淡出。但是当第三次点击时,行为再次像预期的那样。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>
答
你应该使用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>
答
在这里,你有一个解决方案
$('.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>
希望这将帮助你
你有什么@FastSnail错误? – Shiladitya
@FastSnail Bug修复。 – Shiladitya
现在好了,它的工作 –