我有一个 html 元素，当悬停在它上面时，它使用引导工具提示来显示标题。但是，当您单击此元素时，我正在更改工具提示，但新的工具提示不会显示，直到我将鼠标从中移除并再次将鼠标悬停在该元素上。
我希望在单击所述按钮时立即显示工具提示。我怎样才能做到这一点？有没有办法在没有更好的词的情况下“刷新”一个 html 元素？
【问题讨论】：
m not sure of any 'Refresh' events in bootstrap, but a work around would be to internally call the mouseover` 点击事件回调结束时的事件。
标签： javascript jquery twitter-bootstrap twitter-bootstrap-tooltip
试试这个方法
演示：
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});h3 {
margin-top: 50px;
}<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>注意：
以上逻辑仅适用于 Bootstrap 版本 2.3.2 及以下版本，但是，@NabiK.A.Z's 提供的解决方案将适用于最新版本的 Bootstrap 库。
快乐编码:)
【讨论】：
您可以使用此代码：
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
我用 bootstrap 3.3.4 测试它
您可以在这里查看：
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />【讨论】：
对我来说，在 bootstrap 4 中这行得通：
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()
【讨论】：
现在是 2021 年，对于 Bootstrap 5(BS5)，这里的所有答案都对我没有帮助。上面的大多数答案都更新了工具提示插件生成的$(element).parent().find('.tooltip-inner').html("This is a test"); 的内容。然而，对于 BS5，为工具提示生成的模板具有唯一的 ID，可用于更新工具提示。
这个例子演示了一个简单的场景：当点击.copy_queue_id div 时，从它的属性中复制队列 ID，因此更新工具提示以通知用户
HTML 标记：
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
在 BS5 中测试和工作 希望这对其他人有帮助:)
【讨论】：
当然，您只需要更改 onclick 事件中的工具提示文本
$('.tooltip-inner').html("This is a test");
我为你创建了一个 jsfiddle 作为演示 http://jsfiddle.net/a4WwQ/59/
目前它会更改所有可见的工具提示文本，这不是一个真正的问题，因为您一次不会显示多个。话虽如此，您应该考虑修改代码以指向最近的工具提示。
希望对你有帮助！
【讨论】：
如果您想刷新内容；
$('#example').tooltipster('content', 'i am superman!');
【讨论】：
2021，Bootstrap 5：更新此属性data-bs-original-title。
您也可以将 Razor / Blazor 与此一起使用，如下所示：
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="@title" />
</div>
【讨论】：