27

我有一个$("#settings")带有多个引导工具提示的 div 附加到子元素。

例如，

<div id="settings" style="display: flex;">
  <tbody>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
  </tbody>
</div>

我想$("#settings").tooltip('destroy')在按下按钮时摆脱所有这些工具提示，但它不起作用，我假设因为工具提示实际上不在设置 div 上，而是在其中。

但是我也尝试过$('#settings').find('*').tooltip('destroy')，但也没有用。

是因为我如何初始化它们吗？

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

访问 div 中所有工具提示的快速简便的方法是什么？

4

5 回答 5

54

data-toggle="tooltip"您使用元素容器（主体）通过委托（小提琴）初始化了所有具有属性的元素：

$("body").tooltip({ selector: '[data-toggle=tooltip]' });

因此，为了使用破坏禁用它，您需要在身体上执行此操作：

$('body').tooltip('dispose');

如果您想在没有委托的情况下执行此操作，您可以初始化每个元素（小提琴）：

 $('[data-toggle="tooltip"]').tooltip();

并销毁它：

$('[data-toggle="tooltip"]').tooltip('dispose'); // used in v4
$('[data-toggle="tooltip"]').tooltip('destroy'); // used in v3 and older

如果您仍想初始化槽委托并使用禁用（小提琴）阻止它工作：

$('body').tooltip({ selector: '[data-toggle=tooltip]' });
$('body [data-toggle="tooltip"]').tooltip('disable');

关于从Jasny 的回答中获取的销毁和禁用之间的区别的解释：

$('[rel=tooltip]').tooltip()          // Init tooltips
$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable')  // (Re-)enable tooltips
$('[rel=tooltip]').tooltip('dispose') // Hide and destroy tooltips

这是我在 Bootstraps github中得到的答案- 由于您使用的是委托（即选择器选项），我相信只有一个实际的工具提示实例（在正文上）。因此，尝试销毁触发器元素本身上不存在的工具提示实例没有任何效果。比较非委托版本：http: //jsfiddle.net/zsb9h3g5/1/

于 2015-01-29T17:20:46.697 回答
13

选择的答案会破坏工具提示，因此它们完全消失并且其功能被禁用。

如果您只是想在保持其功能的同时一次性删除所有工具提示，请使用$('.tooltip').remove();.

于 2017-07-15T22:41:59.113 回答
10

从 bootstrap 版本 4 开始，根据文档，您应该使用不再定义的dispose 。destroy示例如下：

$('#element').tooltip('dispose')
于 2017-08-07T02:06:02.477 回答
1

我在 Bootstrap 3 中遇到了一种情况，其中 <select>$('body').tooltip('destroy')上的工具提示不适用于通过$('[data-toggle="tooltip"]').tooltip({container:'body'}).

最终onchange="$('.tooltip').remove()"用于删除所有工具提示。这种方法适用于 BS 方法不起作用的地方。希望它可以帮助有类似情况的人

笔记

我的opacity:0<select> 被放置在一个 BS 按钮上，以利用 OS 下拉菜单而不是传统的 BS 下拉菜单。由于覆盖，按钮没有收到悬停，因此工具提示被添加到不可见的 <select>

我还添加this.blur()了 onchange 事件。否则 <select> 保持焦点，防止工具提示在重复悬停时触发

于 2018-09-28T13:37:23.297 回答
0

要仅销毁 内部的工具提示#settings，请执行以下操作：

$('#settings [data-toggle="tooltip"]').tooltip('destroy');
于 2015-01-29T17:27:28.250 回答