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


当前回答

如果你在HTML中设置了标题属性,那么在点击图标或按钮时使用 (美元).attr(“标题”,newValue);

其他回答

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

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

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

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

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

下面的工作对我来说是最好的,基本上我废弃了任何现有的工具提示,不麻烦显示新的工具提示。如果像在其他答案中一样调用工具提示上的show,即使光标没有悬停在它上面,它也会弹出。

我选择这个解决方案的原因是,其他解决方案重用了现有的工具提示,导致了一些奇怪的问题,当鼠标悬停在元素上方时,工具提示有时不显示。

function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}

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

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

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

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