单击项目时，Jquery工具提示不会消失

Question

我正在使用jquery-1.9.1.js和用户界面jquery-ui-1.10.3.custom.min.js。当我将鼠标悬停在任何表单元素上时，它会显示工具提示并在鼠标输出时消失。但我想在该项目的点击事件上消除该工具包，因为在我当前的场景中它显示了按钮的工具提示，即使在按钮点击后它仍然存在。因此它在页面上看到多个工具提示。我需要在点击后立即隐藏它们。（下面是屏幕截图）。

我使用下面的代码，但对我不起作用

 $(document).click(function() {
       $(this).tooltip( "option", "hide", { effect: "explode", duration: 500 } );
        });

如何解决这个问题。

修改

我正在使用更新面板。会产生问题吗？

Answer 1

根据jQueryUI文档，您的代码只会更改它的关闭方式。你想要的是close http://api.jqueryui.com/tooltip/#method-close。

但是，您可能需要稍微更改一下代码才能使其正常工作。根据您的代码判断，您使用委托（允许其他人为您的项目制作工具提示），而不是直接将其应用于您的项目。根据文档，close不适用于委派的工具提示。

你会想要类似于

的东西

$('.editButtons').tooltip().click(function() {
    $('.editButtons').tooltip( "close");
})

Answer 2

关闭委托工具提示（最后一个打开）的丑陋黑客

$('div[id^="ui-tooltip-"]:last').remove();

Answer 3

可能是一个肮脏的黑客，但你不能通过使用＆＃34; ui-tooltip＆＃34;选择它来隐藏自己的工具提示元素。这是应用于工具提示容器的类。

$('body').on("click","element_selector",function(event){
$('.ui-tooltip').hide();
});

你应该替换＆＃34; element_selector＆＃34;通过适当的选择器为您的元素。

Answer 4

我知道这是一个老问题，但我遇到了同样的问题并使用以下方法解决它。

假设你使用它来启动工具提示：

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

点击后，以下内容淡出工具提示。淡入淡出后将其从DOM中删除（否则您可能会遇到大量隐藏的工具提示）。

$('[data-toggle="tooltip"]').click(function() {
    $('.tooltip').fadeOut('fast', function() {
        $('.tooltip').remove();
    });
});

希望这有助于某人！

Answer 5

我在使用jq 1.12时采用了略微不同的方法，在显示新的时隐藏了所有的ui-tooltips。这是在Chrome和IE 11和IE 11中测试的（ie8仿真通过http-equiv =“X-UA-Compatible”内容=“IE = 8”）

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            $(".ui-tooltip").fadeOut(); /* tooltip genocide */
            return $(this).prop('title');
        },
        show: {
            effect: "fade",
            delay: 750
        }
    }
});

HTH

Answer 6

$(document).click(function() {
    $(this).tooltip( "option", "hide", { effect: "explode", duration: 500 } ).off("focusin focusout");
});