【问题标题】:How to overwrite twitter bootstrap tooltip?如何覆盖 twitter 引导工具提示?
【发布时间】:2012-06-26 19:08:39
【问题描述】:

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

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

但是,工具提示的标题不会随新文本而改变。它与最初设置的一样。任何想法为什么,有什么解决方法吗?谢谢!

【问题讨论】:

  • 试试这个:$(elm).tooltip('destroy').tooltip().tooltip('show');

标签: twitter-bootstrap tooltip


【解决方案1】:

在一个元素上初始化工具提示对象后,您将无法覆盖它。但是你可以删除它然后再做一次。

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

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

可能需要删除侦听器,但它的工作原理是这样的。


在 TWBS v3 之前,您不需要 bs 命名空间:data('tooltip')

【讨论】:

  • 太好了,正是我需要的。非常感谢!
  • @bbbonthemoon 偶然发现了这篇文章:stackoverflow.com/a/9875490/1478467 可能更干净
  • 我有一些 javascript 可以为某些文本块添加自定义样式。工具提示不适用于替换的文本,但上述更改修复了它!
  • 如果你使用boostrap3,你需要使用data('bs.tooltip')而不是data('tooltip')
【解决方案2】:

这项技术对我不起作用,所以我找到了一个答案,隐藏在其中一个 cmets of a similar question 中。

更新工具提示显示文本的最简洁方式

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

感谢lukmdo

【讨论】:

    【解决方案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 选项以及其他选项,并制作了一个放置在元素顶部的工具提示而不是像原来那样在右边。它甚至可能还有上面列出的一些其他错误,在此解决方案的其他变体中也可以看到,但我没有进一步研究。

    【讨论】:

      【解决方案4】:

      由于某种原因,这对我不起作用(引导程序 2.1.1)。 我必须做的是:

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

      【讨论】:

      • 这对我有用。我根据 UI 的上下文使用了两个完全不同的工具提示。谢谢@aszahran。
      【解决方案5】:

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

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

      【讨论】:

        【解决方案6】:

        这适用于引导程序 3,高于此线程中给出的所有其他解决方案:

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-03-08
          相关资源
          最近更新 更多