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

谢谢这个代码对我很有帮助，我发现它对我的项目很有效

$（element）.attr（'title'， 'message'）.tooltip（'fixTitle'）.tooltip（'show'）;

在bootstrap 4中，我只使用$(el).tooltip('dispose');然后像往常一样重新创建。所以你可以把dispose放在创建工具提示的函数之前，以确保它不会折叠。

不得不检查状态和修补值似乎不太友好。

下面是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。

引导5.2.0

Bootstrap版本5.2.0现在有setContent方法在初始化后更改工具提示标题。https://getbootstrap.com/docs/5.2/components/tooltips/#methods

var tooltip = bootstrap.Tooltip.getInstance('#elementId');
tooltip.setContent({ '.tooltip-inner': 'another title' });

Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");