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


当前回答

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

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

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

其他回答

可以使用函数在工具提示调用中设置内容

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

你不必只使用被调用元素的标题。

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

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

如果你想在不关闭和重新打开工具提示的情况下更改文本,这里有一个很好的解决方案。

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

这样,文本替换而不关闭工具提示(不重新定位,但如果你正在做一个词的改变等应该是好的)。当你将鼠标悬停在工具提示上时,它仍然在更新。

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

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

销毁任何已存在的工具提示,以便我们可以用新的工具提示内容重新填充

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});