如何覆盖 Twitter Bootstrap 工具提示？

Question

如何覆盖 Twitter Bootstrap 工具提示？

14

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

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

然而，工具提示的标题并没有随着新文本的更改而改变。它仍然与最初设置的一样。有什么想法，是否有任何解决方法？谢谢！

- bbbonthemoon

尝试这个：$(elm).tooltip('destroy').tooltip().tooltip('show'); - Aliti

6个回答

8

这种技术对我无效，所以我在类似问题的评论中找到了一个答案。

最干净的更新工具提示显示文本的方法：

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

感谢lukmdo

- George Albertyn

3

我使用的是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 选项和其他选项，并生成一个放置在元素顶部而不是右侧的工具提示，原本应该放置在右侧。它甚至可能有一些以上列出的其他错误，在此解决方案的其他变体中看到，但我没有深入研究。

- yourpublicdisplayname

2

出于某些原因，这对我不起作用（bootstrap 2.1.1）。我所需要做的是：

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

- aszahran

这是对我有效的解决方案。根据 UI 上下文，我使用了两个完全不同的工具提示。感谢 @aszahran。 - Hallmanac

0

@Sherbrow，你可以使用最简单的方法，不需要使用这么复杂的解决方案。以下是示例代码。

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

- Well Wisher

0

这在 Bootstrap 3 中有效，超过了本帖中提供的其他解决方案。

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

- cguWEB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sherbrow · Accepted Answer

一旦您在一个元素上初始化了提示框对象，就不能覆盖它。但是您可以将其删除并重新进行初始化。

尝试使用所有选项（如果有的话）删除，然后再次初始化提示框。

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

可能需要删除监听器，但它的工作方式就是这样。

在 TWBS v3 之前，您不需要使用 bs 命名空间，只需使用 data('tooltip')