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

2021/01/28 23:41 · jquery ·  · 0评论

我的$("#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中的所有工具提示?

data-toggle="tooltip"使用元素容器(主体)通过委托fiddle初始化了所有具有属性的元素

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

因此,为了使用destroy禁用它,您需要在主体上执行以下操作:

$('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

如果您仍然想初始化槽式委托并使用disablefiddle停止它的工作

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

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

这是我在Bootstraps github中得到的答案-由于您正在使用委托(即选择器选项),因此我相信(主体上)只有一个实际的工具提示实例。因此,尝试销毁触发器元素本身上不存在的工具提示实例无效。比较未授权版本:http : //jsfiddle.net/zsb9h3g5/1/

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

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

作为引导版本4,并根据文件,你应该使用处置作为destroy不再定义。示例如下:

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

我在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>会保持焦点,以防止工具提示在重复的悬停上触发👍

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

$('#settings [data-toggle="tooltip"]').tooltip('destroy');
本文地址:http://jquery.askforanswer.com/xiaohuidivzhongdesuoyoubootstrapgongjutishi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!