下面是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');

从用户体验方面，你只看到文本被改变，没有褪色或隐藏/显示效果，也不需要_fixTitle。

如果你想在不关闭和重新打开工具提示的情况下更改文本，这里有一个很好的解决方案。

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

这样，文本替换而不关闭工具提示(不重新定位，但如果你正在做一个词的改变等应该是好的)。当你将鼠标悬停在工具提示上时，它仍然在更新。

**这是bootstrap 3，对于2，你可能需要改变数据/类名

今天在阅读源代码时发现了这个。因此$. Tooltip (string)调用Tooltip类中的任何函数。如果你看工具提示。fixTitle，它获取data-original-title属性并用它替换title值。

所以我们简单地做:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

当然，它会更新标题，也就是工具提示中的值。

更短的方法:

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');

我不能得到任何答案工作，这里有一个变通办法:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

Bootstrap 5不再有fixTitle或_fixTitle，所以我不得不处理整个Tooltip对象并重建它:

$('a.copy').click(function() {
    var tt = bootstrap.Tooltip.getInstance(this);
    tt.dispose();
    this.setAttribute('title', 'Copied!')
    tt = bootstrap.Tooltip.getOrCreateInstance(this);
    tt.show();
}

如果你有多个动态变化的工具提示，不要使用.tooltip('show')，参见下面的例子，将下面的所有元素悬停1秒，然后鼠标离开，你会看到意想不到的结果

$('[data-toggle="tooltip"]').tooltip() $('[data-toggle="tooltip"]').mouseover((e) => { let self = $(e.target); setTimeout(function() { // ajax call self.attr('data-original-title', 'New Value of ' + self.text()) .tooltip('show'); }, 3000); }) span{margin: 20px;font-weight: bold} <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"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <span data-toggle="tooltip" title="Text 1">Text 1</span> <span data-toggle="tooltip" title="Text 2">Text 2</span> <span data-toggle="tooltip" title="Text 3">Text 3</span>

更好的方法是编辑data-original-title和.tooltip-inner

$('[data-toggle="tooltip"]').tooltip() $('[data-toggle="tooltip"]').mouseover((e) => { let self = $(e.target); setTimeout(function() { // ajax call let newValue = 'New Value of ' + self.text(); self.attr('data-original-title', newValue) $('.tooltip-inner').html(newValue) }, 3000); }) span{margin: 20px;font-weight: bold} <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"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <span data-toggle="tooltip" title="Text 1">Text 1</span> <span data-toggle="tooltip" title="Text 2">Text 2</span> <span data-toggle="tooltip" title="Text 3">Text 3</span>