我在一个锚元素上有一个工具提示，它会在点击时发送一个AJAX请求。这个元素有一个工具提示（来自Twitter Bootstrap）。我想要在AJAX请求成功返回时更改工具提示内容。如何在启动后操纵工具提示？
答案 0 :(得分：388)
今天在阅读源代码时发现了这一点。因此$.tooltip(string)会调用Tooltip类中的任何函数。如果您查看Tooltip.fixTitle，它会获取data-original-title属性并用它替换标题值。
所以我们只是这样做：
$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');
果然，它会更新标题，这是工具提示中的值。
另一种方式（参见下面的@lukmdo评论）：
$(element).attr('title', 'NEW_TITLE')
.tooltip('fixTitle')
.tooltip('show');
答案 1 :(得分：85)
在Bootstrap 3中，调用elt.attr('data-original-title', "Foo")就足够了，因为"data-original-title"属性中的更改已触发工具提示显示中的更改。
更新：您可以添加.tooltip（'show'）立即显示更改，您无需鼠标移除和鼠标悬停目标以查看标题中的更改
elt.attr('data-original-title', "Foo").tooltip('show');
答案 2 :(得分：13)
您可以在不实际调用show / hide：
的情况下更新工具提示文本$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent')
答案 3 :(得分：11)
如果您想在不关闭并重新打开工具提示的情况下更改文本，那么这是一个很好的解决方案。
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
这样，文本被替换而没有关闭工具提示（没有重新定位，但如果你正在做一个单词改变等应该没问题）。当你将鼠标悬停在工具提示上时，它仍会更新。
**这是bootstrap 3，对于2你可能需要更改数据/类名
答案 4 :(得分：8)
如果工具提示已经实例化（可能使用javascript），则此方法有效：
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
答案 5 :(得分：6)
对于bootstrap 3.x
这似乎是最干净的解决方案：
$(element)
.attr('data-original-title', 'New title').tooltip('show')
Show用于立即更新标题，而不是等待隐藏工具提示并再次显示。
答案 6 :(得分：6)
for Bootstrap 4：
$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
答案 7 :(得分：5)
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);#topic_1 {
border: 1px solid red;
margin: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<div id="topic_1">Topic 1</div>
答案 8 :(得分：4)
这是 Bootstrap 4 的更新：
var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
但是最好的方法是这样做：
var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
或内联：
var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');
从UX方面，您仅看到文本已更改，没有褪色或隐藏/显示效果，并且不需要_fixTitle。
答案 9 :(得分：4)
以下对我来说效果最好，基本上我正在废弃任何现有的工具提示而不打扰显示新的工具提示。如果在工具提示中像在其他答案中一样调用show，则即使光标没有悬停在其上方，它也会弹出。
我采用这种解决方案的原因是其他解决方案，重新使用现有的工具提示，导致一些奇怪的问题，工具提示有时在将光标悬停在元素上方时无法显示。
function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}
答案 10 :(得分：2)
您可以使用功能
在工具提示调用上设置内容 $("#myelement").tooltip({
"title": function() {
return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
}
});
您不必仅使用被调用元素的标题。
答案 11 :(得分：2)
感谢此代码对我非常有帮助，我发现它对我的项目有效
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
答案 12 :(得分：2)
在bootstrap 4中我只使用$(el).tooltip('dispose');然后正常重新创建。因此，您可以将dispose置于创建工具提示的函数之前，以确保它不会加倍。
必须检查状态并修改值似乎不太友好。
答案 13 :(得分：1)
销毁任何预先存在的工具提示，以便我们可以使用新的工具提示内容重新填充
$(element).tooltip("destroy");
$(element).tooltip({
title: message
});
答案 14 :(得分：0)
如果您在 HTML 中设置了 title 属性，则在单击图标或按钮时使用 $(this).attr('title',newValue);
答案 15 :(得分：0)
我仅在引导程序4 中进行了测试，并且没有调用.show（）
el.tooltip('hide').attr('data-original-title', 'message');
答案 16 :(得分：0)
对于BS4（和BS3进行了细微的更改）..经过数小时的搜索和试验，我想出了最可靠的解决方案，它甚至解决了在该处打开多个（工具提示或弹出窗口）的问题。同时，以及失去焦点后自动打开等问题。
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
}).on('shown.bs.tooltip', function() {
var link = $(this);
var data = '';
data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
data += ' <li>Sherif Salah</li>';
data += ' <li>Muhammad Salah</li>';
data += ' <li>and a gazillion more...</li>';
data += '</ul>';
link.attr('data-original-title', data);
setTimeout(function() {
if (link.is(':hover')) {
link.tooltip("dispose").tooltip("show");
}
}, 1000);
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="card">
<div class="card-body text-center">
<a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
答案 17 :(得分：0)
使用工具提示对象Boostrap：
$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
答案 18 :(得分：0)
这对我有用:( bootstrap 3.3.6; jquery = 1.11.3）
<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>
<script>
$('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>
属性data-html="true"允许在工具提示标题上使用html。
答案 19 :(得分：0)
我认为Mehmet Duran几乎是正确的，但是在使用具有相同工具提示及其位置的多个类时存在一些问题。如果有任何名为“tooltip_class”的类，以下代码也可以避免js错误检查。希望这会有所帮助。
if (jQuery(".tooltip_class")[0]){
jQuery('.tooltip_class')
.attr('title', 'New Title.')
.attr('data-placement', 'right')
.tooltip('fixTitle')
.tooltip('hide');
}
答案 20 :(得分：0)
我无法解决任何问题，这是一个解决方法：
$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
答案 21 :(得分：0)
通过直接更改元素中的文本来更改文本。 （不更新工具提示位置）。
$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);
通过销毁旧工具提示，然后创建并显示新工具提示来更改文本。 （导致旧的淡出淡出，新的淡出淡出）
$element
.tooltip('destroy')
.tooltip({
// Repeat previous options.
title: newText,
})
.tooltip('show');
我正在使用top方法为“Saving”设置动画。消息（使用 ，因此工具提示的大小不会改变）并将文本更改为“完成”。请求完成时（加填充）。
$element.tooltip({
placement: 'left',
title: 'Saving...',
trigger: 'manual',
}).tooltip('show');
var parent = $element.parent();
var interval_id = setInterval(function(){
var text = $('.tooltip-inner', parent).html();
switch(text) {
case 'Saving. ': text = 'Saving.. '; break;
case 'Saving.. ': text = 'Saving...'; break;
case 'Saving...': text = 'Saving. '; break;
}
$('.tooltip-inner', parent).html(text);
}, 250);
send_request( function(){
// When the request is complete
clearInterval(interval_id);
$('.tooltip-inner', parent).html('Done. ');
setTimeout(function() {
$element.tooltip('hide');
}, 1500 /* Show "Done." for a bit */);
});
答案 22 :(得分：-1)
我正在使用这种简单的方法：
$(document).ready(function() {
$("#btn").prop('title', 'Click to copy your shorturl');
});
function myFunction(){
$(btn).tooltip('hide');
$(btn).attr('data-original-title', 'Test');
$(btn).tooltip('show');
});
答案 23 :(得分：-1)
$(this).attr('data-original-title', 'click here to publish')
.tooltip('fixTitle')
.tooltip('show');
如果在使用attr'data-original-title'初始化工具提示后需要更改其文本，则很有用。
答案 24 :(得分：-1)
当ajax请求成功返回时，您可以使用此代码隐藏工具提示更改其标题并再次显示工具提示。
$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() { $(element).tooltip('show');}, 500);