销毁Div中的所有Bootstrap工具提示 [英] Destroy All Bootstrap Tooltips in A Div

问题描述

我有一个$("#settings") div，在子元素上附加了多个引导工具提示.

I have a $("#settings") div with multiple bootstrap tooltips attached to the child elements.

例如，

<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，但在里面.

I want to do $("#settings").tooltip('destroy') to get rid of all these tooltips on a button press, but it doesn't work, I'm assuming because the tooltips aren't actually on the settings div, but inside it.

但是我也尝试过$('#settings').find('*').tooltip('destroy')，但是那也不起作用.

However I also tried $('#settings').find('*').tooltip('destroy') and that didn't work either.

是因为我要初始化它们吗?

Is it because of how I am initializing them?

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

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

What is a fast and easy way to access all the tooltips within a div?

推荐答案

您使用元素容器(主体)通过委托(小提琴):

You initialized all of the elements which have data-toggle="tooltip" attribute using the elements container (the body) trough delegation (fiddle):

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

所以要使用destroy禁用它，您需要在主体上做它:

so in order to disable it using destroy you need to do it on the body:

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

如果您要在没有委派的情况下完成，则可以初始化每个元素(小提琴):

If you want to do it without delegation you can initialize each of the elements (fiddle):

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

并销毁它:

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

如果您仍想初始化槽授权并使用 disable (

If you still want to initialize trough delegation and stop it from working using disable (fiddle):

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

从 Jasny的答案中获得的关于销毁和禁用之间区别的说明:

Explanation about difference between destroy and disable taken from 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 -由于您正在使用委托(即选择器选项)，因此我相信(主体上)只有一个实际的工具提示实例.因此，尝试销毁触发器元素本身上不存在的工具提示实例无效. 比较未授权版本: http://jsfiddle.net/zsb9h3g5/1/

This is the answer I got in Bootstraps github - Since you're using delegation (i.e. the selector option), I believe there's only one actual tooltip instance (on the body). Thus, trying to destroy nonexistent tooltip instances on the trigger elements themselves has no effect. Compare the non-delegated version: http://jsfiddle.net/zsb9h3g5/1/

这篇关于销毁Div中的所有Bootstrap工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！