Javascript 销毁 Div 中的所有 Bootstrap 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28220597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Destroy All Bootstrap Tooltips in A Div
提问by LSD
I have a $("#settings")div with multiple bootstrap tooltips attached to the child elements.
我有一个$("#settings")带有多个引导工具提示的div 附加到子元素。
For example,
例如，
<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>
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 onthe settings div, but inside it.
我想$("#settings").tooltip('destroy')在按下按钮时摆脱所有这些工具提示，但它不起作用，我假设是因为工具提示实际上不在设置 div 上，而是在其中。
However I also tried $('#settings').find('*').tooltip('destroy')and that didn't work either.
不过我也试过了$('#settings').find('*').tooltip('destroy')，也没用。
Is it because of how I am initializing them?
是因为我如何初始化它们吗？
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
What is a fast and easy way to access all the tooltips within a div?
访问 div 中所有工具提示的快速简便方法是什么？
回答by Technotronic
You initialized all of the elements which have data-toggle="tooltip"attribute using the elements container (the body) trough delegation(fiddle):
您data-toggle="tooltip"使用元素容器（主体）通过委托（fiddle）初始化了所有具有属性的元素：
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
so in order to disable it using destroy you need to do it on the body:
所以为了使用 destroy 禁用它，你需要在 body 上执行它：
$('body').tooltip('dispose');
If you want to do it without delegationyou can initialize each of the elements (fiddle):
如果您想在没有委托的情况下执行此操作，您可以初始化每个元素（fiddle）：
$('[data-toggle="tooltip"]').tooltip();
and destroy it:
并摧毁它：
$('[data-toggle="tooltip"]').tooltip('dispose'); // used in v4
$('[data-toggle="tooltip"]').tooltip('destroy'); // used in v3 and older
If you still want to initialize trough delegationand stop it from working using disable(fiddle):
如果您仍然想初始化低谷委托并使用disable( fiddle)阻止它工作：
$('body').tooltip({ selector: '[data-toggle=tooltip]' });
$('body [data-toggle="tooltip"]').tooltip('disable');
Explanation about difference between destroy and disable taken from Jasny's answer:
从Jasny 的回答中获取的关于 destroy 和 disable 之间区别的解释：
$('[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
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/
这是我在 Bootstraps github 中得到的答案- 由于您使用的是委托（即选择器选项），我相信只有一个实际的工具提示实例（在正文中）。因此，尝试销毁触发器元素本身上不存在的工具提示实例是无效的。比较非委托版本：http: //jsfiddle.net/zsb9h3g5/1/
回答by kjdion84
The chosen answer destroys the tooltips so they are gone completely and their functionality is disabled.
选择的答案会破坏工具提示，因此它们完全消失并且其功能被禁用。
If you simply want to get rid of all tooltips at once while maintaining their functionality, use $('.tooltip').remove();.
如果您只是想在保持其功能的同时一次性删除所有工具提示，请使用$('.tooltip').remove();.
回答by Muhammad Soliman
回答by Mavelo
I had a situation in Bootstrap 3 with tooltips on a <select> where $('body').tooltip('destroy')would not work on tooltips initialized via $('[data-toggle="tooltip"]').tooltip({container:'body'}).
我在 Bootstrap 3 中遇到了一种情况，在 <select> 上有工具提示，在$('body').tooltip('destroy')通过$('[data-toggle="tooltip"]').tooltip({container:'body'}).
Ended up using onchange="$('.tooltip').remove()"to remove all tooltips. This method works where BS methods would not. Hope it helps someones with a similar situation
最终onchange="$('.tooltip').remove()"用于删除所有工具提示。这种方法适用于 BS 方法不适用的地方。希望对有类似情况的人有所帮助
Notes
笔记
My opacity:0<select> was placed over a BS button to utilize OS dropdowns instead of a traditional BS dropdown. The button does not receive hover due to the overlay, so the tooltip was added to the invisible <select>
我的opacity:0<select> 被放置在 BS 按钮上以利用操作系统下拉菜单而不是传统的 BS 下拉菜单。由于覆盖，按钮没有收到悬停，因此工具提示被添加到不可见的 <select>
I also added this.blur()to the onchange event. Otherwise the <select> keeps focus preventing the tooltip from firing on repetitive hovers
我还添加this.blur()到 onchange 事件。否则 <select> 保持焦点防止工具提示在重复悬停时触发
回答by isherwood
To only destroy tooltips inside #settings, do this:
要只销毁里面的工具提示#settings，请执行以下操作：
$('#settings [data-toggle="tooltip"]').tooltip('destroy');
