【问题标题】:Jquery tooltip is not disappearing on click of item单击项目时,Jquery 工具提示不会消失
【发布时间】:2013-07-23 19:01:08
【问题描述】:

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

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

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

如何解决这个问题请帮忙。

编辑

我正在使用更新面板。这会造成问题吗?

【问题讨论】:

    标签: jquery jquery-ui asp.net-ajax updatepanel jquery-ui-tooltip


    【解决方案1】:

    我在使用 jq 1.12 时采用了一种稍微不同的方法,即在显示新的 ui-tooltips 时隐藏所有的 ui-tooltips。这是在 Chrome 和 IE 11 和 IE 11 中测试的(通过 http-equiv="X-UA-Compatible" content="IE=8" 进行 ie8 仿真)

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

    【讨论】:

      【解决方案2】:

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

      假设您使用它来启动工具提示:

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

      单击后,以下内容会淡出工具提示。淡入淡出后会将其从 DOM 中移除(否则您可能会得到很多隐藏的工具提示)。

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

      希望这对某人有所帮助!

      【讨论】:

      • 我不得不重写一下:$("[data-toggle=\"tooltip\"]").click(function () { var $this = $(this); $(".tooltip").fadeOut("fast", function () { $this.blur(); }); }); 否则工具提示将永远不会回来。
      • @Roland 我已经使用了模糊,尽管我没有再次获得工具提示。
      【解决方案3】:

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

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

      您应该将“element_selector”替换为适合您元素的选择器。

      【讨论】:

        【解决方案4】:
        $(document).click(function() {
            $(this).tooltip( "option", "hide", { effect: "explode", duration: 500 } ).off("focusin focusout");
        });
        

        【讨论】:

        • 这会在一段时间后自动隐藏工具提示。我认为这是提问者不想要的。正如他所写,它应该在点击它时立即关闭。
        【解决方案5】:

        关闭委托工具提示的丑陋技巧(最后一个打开)

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

        【讨论】:

        • 在我的情况下,如果某些 DOM 存在/不存在,我使用 $('div[class^="ui-tooltip"]').remove();
        • 好黑客@KAZ-to-USA
        【解决方案6】:

        根据 jQueryUI 文档,您的代码仅更改其关闭方式。你想要的是closehttp://api.jqueryui.com/tooltip/#method-close

        但是,您可能需要稍微更改代码才能使其正常工作。从您的代码来看,您使用委托(允许其他东西为您的项目制作工具提示),而不是将其直接应用于您的项目。根据文档,close 不适用于委派的工具提示。

        你会想要类似于

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

        【讨论】:

        • 由于您没有提供其他信息,因此这只是一般性指导。如果您的按钮没有 editButtons 类,它将无法工作。请参阅jsfiddle.net/aeWvK 寻求帮助
        • 我用过$(docuement).tooltip( "close");
        • 我说这在我的回答中不起作用。 document 没有通过委托接收的工具提示。您必须通过选择它们来专门在您的项目上制作它们。
        • 是的,你是对的。它适用于单个选择器。但我需要它在全球范围内应用它,以便任何具有工具提示的元素;一旦点击它的工具提示应该消失。请提出建议。
        • 所以它需要关闭所有打开的工具提示还是只关闭相关的?
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-11-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多