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


当前回答

通过直接更改元素中的文本来更改文本。(不会更新工具提示位置)。

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

通过销毁旧的工具提示来更改文本,然后创建并显示一个新的工具提示。(使旧的淡出,新的淡出)

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

我使用top方法来动画“Saving.”消息(使用&nbsp,这样工具提示的大小不会改变),并将文本更改为“Done”。(加上填充)当请求完成。

$element.tooltip({
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
}).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function(){
    var text = $('.tooltip-inner', parent).html();
    switch(text) {
    case 'Saving.  ': text = 'Saving.. '; break;
    case 'Saving.. ': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.  '; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.    ');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

其他回答

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

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

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

我不能得到任何答案工作,这里有一个变通办法:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

Bootstrap 4:

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

我认为Mehmet Duran几乎是正确的,但是当使用相同的工具提示和位置使用多个职业时,会出现一些问题。下面的代码也避免了js错误检查是否有任何名为“tooltip_class”的类。希望这能有所帮助。

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }