Question

我正在使用Twitter Bootstrap包中的工具提示来显示页面上的项目信息。有时信息会发生变化，需要在工具提示中进行更新。我尝试用新标题重新初始化工具提示：

$('#selector').tooltip({ title: 'new text'});

但是，新文本不会更改工具提示的标题。它与最初设定的相同。任何想法为什么，有什么工作吗？谢谢！

Answer 1

更新：正如@ Nigel-Angel所指出的，TWBS v3使用data('bs.tooltip')

在一个元素上初始化工具提示对象后，无法覆盖该工具提示对象。但你可以删除它并再次执行。

尝试删除然后使用所有选项重新初始化工具提示（如果有的话）。

$('#selector').data('tooltip',false)          // Delete the tooltip
              .tooltip({ title: 'new text'});

可能需要删除侦听器，但它的工作原理如下。

Answer 2

这项技术对我没有用，所以我找到了一个答案，隐藏在其中一条评论of a similar question中。

更新工具提示的显示文字的最简洁方法

$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');

感谢lukmdo

Answer 3

出于某种原因，这对我不起作用（bootstrap 2.1.1）。我必须做的是：

    $('#element').tooltip('destroy');
    $("#element").tooltip({'placement':'right', 'title':'larger larger text title'});
    $("#element").tooltip('show');

Answer 4

我使用bootstrap 3，没有错误，这些都不适合我。通过.tooltip('destroy')销毁工具提示并在同一函数.tooltip({...})中重新创建工具提示将导致工具提示不再有效。只有在销毁调用完成它的异步工作之后才进行娱乐调用，这才有效（因此，为什么立即娱乐被破坏了）。

销毁内部数据.data('tooltip',false)的建议不起作用。首先，使用bootstrap 3，它将是data('bs.tooltip, false)，当调用它时，如果当前显示工具提示，它将泄漏它并使其永久显示。新的工具提示将显示和隐藏在其顶部。

我的最终解决方案是：

$x.tooltip('hide');
$x.data('bs.tooltip', false);
$x.tooltip({ ... }) // recreate it

请注意，同时通过.attr('title', '...')和类似的解决方案更改标题并调用.tooltip('fixupTitle')也有效 - 但放弃了placement选项，可能还放弃了其他选项，并制作了一个工具提示放置在元素的顶部而不是右边，就像它最初一样。它甚至可能有上面列出的其他一些错误，在此解决方案的其他变体中可以看到，但我看起来并不多。

Answer 5

@Sherbrow你可以使用最简单的一个。不要去这个复杂的解决方案。这是示例代码。

$('#spanUsername').prop('title', newValue);

Answer 6

这在引导程序3中有效，高于该线程中给出的所有其他解决方案：

$('#tooltip_selector').attr('data-original-title', 'New Title Here');

如何覆盖twitter bootstrap工具提示？

6 个答案: