对于引导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（）

今天在阅读源代码时发现了这个。因此$. 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');

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

对于引导3.x

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

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

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