Question

这样我就会从验证函数中显示bootstrap工具提示。

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工具提示？

Answer 1

当您打开100个工具提示时，我相信您已为所有内容提供了.tooltip课程。因此，您可以使用此简写来关闭所有工具提示：

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

<强>段

＆＃13;

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

＆＃13;

body {padding: 50px;}

＆＃13;

<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>

＆＃13;

Answer 2

使用以下代码隐藏所有工具提示。

reject

- 帮助：）

Answer 3

我已经以这种方式完成了工作....只是在表格中进行迭代。

function HideToolTips() {
    $('#StudentGrid tbody > tr').each(function (i, row) {
            $(this).find("input[id*='FirstName']").tooltip('hide');
            $(this).find("input[id*='LastName']").tooltip('hide');
            $(this).find("select[id*='cboState'] :selected").tooltip('hide');
            $(this).find("select[id*='cboCity'] :selected").tooltip('hide');
    });
}

Answer 4

我的解决办法是

$(".ui-tooltip").css('display','none');

Answer 5

这将有助于关闭任何按钮、任何 id 的工具提示

$(document).on("click","button",function(){$(this).trigger("blur")})
$(document).on("mouseup","button",function(){$(this).trigger("blur")})
$(document).on("mousedown","button",function(){$(this).trigger("blur")})

工具提示将在按钮点击时关闭按钮的工具提示

Jquery：如何隐藏或关闭所有打开的bootstrap工具提示

5 个答案: