我在一个锚元素上有一个工具提示,它在单击时发送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');

其他回答

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

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

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

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

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

$('.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 */);
});

我认为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');

    }

使用工具提示对象Boostrap:

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

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

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

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