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


当前回答

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

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

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

其他回答

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

如果工具提示已经实例化(可能用javascript),这是有效的:

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

下面是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');

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

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