jQuery:如何隐藏或关闭所有打开的引导工具提示

问题描述

这样，我将通过验证功能显示引导工具提示.

This way I am showing bootstrap tooltip from my validation function.

var options = { html: true, placement: 'bottom', title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' };
        $(inputElement).addClass('validation-error');
        inputElement.tooltip("destroy")
            .addClass("error")
            .tooltip(options);
inputElement.tooltip("show");

因此，当打开许多工具提示时，如果我单击另一个按钮，则工具提示仍处于打开状态，这不好.所以告诉我当用户单击另一个按钮时如何隐藏或关闭所有打开的bootstarp工具提示?

so when many tooltips is open and if i click on another button then tooltips are still open which is not good. so tell me how to hide or close all open bootstarp tooltips when user click on another button?

推荐答案

当您打开数百个工具提示时，我相信您为所有内容提供了.tooltip类.因此，您可以使用此快捷方式关闭所有工具提示:

When you have 100s of tooltips open, I believe you have given .tooltip class for everything. So, you can use this shorthand to close all the tooltips:

$(".tooltip").tooltip("hide");

代码段

$(function () {
  $('[data-toggle="tooltip"], .tooltip').tooltip();
  $('[data-toggle="tooltip"], .tooltip').tooltip("show");
  $("button").click(function () {
    $('[data-toggle="tooltip"], .tooltip').tooltip("hide");
  });
});

body {padding: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<br /><br />
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

<br />
<br /><br /><br />
<button>Hide All</button>

这篇关于jQuery:如何隐藏或关闭所有打开的引导工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！