点击即可更改Twitter Bootstrap Tooltip内容

Question

我在一个锚元素上有一个工具提示,它在点击时发送一个AJAX请求.这个元素有一个工具提示(来自Twitter Bootstrap).我想要在AJAX请求成功返回时更改工具提示内容.如何在启动后操纵工具提示？

Answer 1

刚刚在阅读源代码时发现了这一点.所以$.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');

Answer 2

在Bootstrap 3中,调用属性中的更改已经触发工具提示显示中的elt.attr('data-original-title', "Foo")更改就足够了"data-original-title".

更新:您可以添加.tooltip('show')立即显示更改,您无需鼠标移除和鼠标悬停目标以查看标题中的更改

elt.attr('data-original-title', "Foo").tooltip('show');

Answer 3

这是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.

Answer 4

您可以在不实际调用show/hide的情况下更新工具提示文本:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')

Answer 5

如果您想在不关闭并重新打开工具提示的情况下更改文本,那么这是一个很好的解决方案.

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

这样,文本被替换而没有关闭工具提示(没有重新定位,但如果你正在做一个单词改变等应该没问题).当你将鼠标悬停在工具提示上时,它仍会更新.

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

Answer 6

如果工具提示已实例化(可能使用javascript),则此方法有效:

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

Answer 7

for Bootstrap 4:

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

Answer 8

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

Answer 9

对于bootstrap 3.x

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

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

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

Answer 10

您可以data-original-title使用以下代码更改:

$(element).attr('data-original-title', newValue);

Answer 11

引导程序4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

$('#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;
}