我在一个锚元素上有一个工具提示,它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?


当前回答

你可以用下面的代码更改data-original-title:

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

其他回答

这对我来说很有效:(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。

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

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

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

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

$(“#foo”).attr('title','TheNewTitle'); $('[data-toggle=“tooltip”]').tooltip('dispose'); $('[data-toggle=“tooltip”]').tooltip()

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

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

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

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