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>

希望這將幫助你