如果你有多个动态变化的工具提示，不要使用.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>

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();
}

如果工具提示已经实例化(可能用javascript)，这是有效的:

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');

想改变工具提示内容/标题点击像引导文档。你注意到你复制了一个代码示例吗?我在这里使用Bootstrap v5…

<span id="tooltip" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top"
title="Tooltip content">Tooltip</span>

在进行下一步之前，请确保已启用Bootstrap5工具提示

$('#tooltip').click(function() {
  $(this).attr('data-original-title', 'Content changed!').tooltip('show');
  $(this).attr('data-original-title', 'Tooltip content');
});

当您将鼠标悬停在这个span元素上时，它将显示工具提示内容。当你点击它，这将改变内容更改!并将返回默认标题Tooltip内容。

对于引导3.x

这似乎是最干净的解决方案:

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

Show用于立即更新标题，而不是等待工具提示被隐藏并再次显示。

我用ajax动态更改工具提示中的标题。

首先启用工具提示: $(“[data-toggle = "提示"]”).tooltip () 然后更改title属性，然后重新初始化工具提示

$（“#foo”）.attr（'title'，'TheNewTitle'）; $（'[data-toggle=“tooltip”]'）.tooltip（'dispose'）; $（'[data-toggle=“tooltip”]'）.tooltip（）