销毁 A Div 中的所有 Bootstrap 个工具提示

Question

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

例如，

<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 中所有工具提示的快速简便方法是什么？

Answer 1

您通过 delegation (fiddle) 使用元素容器 (body) 初始化了所有具有 data-toggle="tooltip" 属性的元素:

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

所以为了使用 destroy 禁用它，你需要在 body:

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

如果你想这样做无需委托你可以初始化每个元素(fiddle):

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

并摧毁它：

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

如果您仍想通过 delegation 初始化槽并使用 disable (fiddle) 停止工作：

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

有关 destroy 和 disable 之间区别的解释取自 Jasny's answer:

$('[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 - 由于您使用的是委托（即选择器选项），我相信只有一个实际的工具提示实例（在 body 上）。因此，尝试销毁触发器元素本身不存在的工具提示实例没有任何效果。比较 non-delegated 版本：http://jsfiddle.net/zsb9h3g5/1/

Answer 2

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

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

Answer 3

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

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

Answer 4

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

$('#element').tooltip('dispose')

Answer 5

我在 Bootstrap 3 中有一个情况，工具提示在被放置在 BS 按钮上以利用 OS 下拉菜单而不是传统的 BS 下拉菜单。由于覆盖，该按钮不会收到悬停，因此工具提示已添加到不可见的保持焦点以防止工具提示在重复悬停时触发

销毁 A Div 中的所有 Bootstrap 个工具提示

Destroy All Bootstrap Tooltips in A Div

javascript

jquery

twitter-bootstrap

twitter-bootstrap-tooltip