jQuery UI工具提示：单击工具提示本身关闭

Question

我有一个包含jQuery UI提示框的页面，该提示框最初是打开的，且禁用了在mouseout事件中关闭。现在，我希望用户单击提示框本身后关闭提示框，而不是单击显示提示框的元素（与其他答案不同）。作为可能的解决方案之一，我认为可以向提示框的div添加一个click处理程序，并从那里关闭它。但我找不到使用Tooltip widget API获取提示框div或以其他方式附加处理程序的标准方法。我的做法对吗？还是有其他方式可以实现我想要的效果？这里有一个JSFiddle演示我目前的情况。

- Alexander Abakumov

Answer 1

我找到了一个相对简单的解决方案，而不需要通过在工具提示 API 中附加 click 处理程序来进行黑客攻击，在工具提示的 open 事件中附加处理程序并在那里关闭工具提示：

$('.first')
    .tooltip({
         content: 'Click to close',
         position: { my: 'left center', at: 'right center' },
         items: '*'

         open: function (event, ui) {
             var $element = $(event.target);
             ui.tooltip.click(function () {
                 $element.tooltip('close');
             });
         },
    })
    .tooltip('open')
    .on('mouseout focusout', function(event) {
        event.stopImmediatePropagation();
    });

JSFiddle

- Alexander Abakumov

Answer 2

试试这个：

$(document).ready(function(){
    $('.first')
        .tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' })
        .tooltip('open')
        .on('mouseout focusout', function(event) {
            event.stopImmediatePropagation();
        })

        // when the tooltip opens (you could also use 'tooltipcreate'), grab some properties and bind a 'click' event handler
        .on('tooltipopen', function(e) {
            var self = this, // this refers to the element that the tooltip is attached to
                $tooltip = $('#' + this.getAttribute('aria-describedby')); // we can get a reference to the tooltip via the `aria-describedby` attribute

            // bind a click handler to close the tooltip
            $tooltip.on('click', function() {
                $(self).tooltip('close');
            });
        });
}); 

• 更新的JSFiddle
• jQuery UI提示工具API

- André Dion

---

你的解决方案可行！不过，你觉得这个怎么样？它看起来更简单，不需要通过节点属性获取工具提示。 - Alexander Abakumov

Answer 3

试试这个：

  $(document).ready(function(){
       $('.first').on('mouseout focusout', function(event) {
         event.stopImmediatePropagation()
       })
       .tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' }).tooltip('open');

      $( "body" ).delegate( ".ui-tooltip", "click", function() {
            $('.first').tooltip('close');
       });
  });

请看代码这里。

- Deepak Arora

---

谢谢！然而，这段代码只能在提示框第一次关闭之前工作一次（[JSFiddle]（https://jsfiddle.net/AlexandrAbakumov/wszLmqad/1/）），因为我们需要每次提示框出现时重新绑定 click 处理程序。 - Alexander Abakumov

请查看更新的代码和fiddle。我已经修复了它。 :) - Deepak Arora

Answer 4

根据Alex的答案，如果你想要仅在点击“X”时关闭：

    $(".t1").tooltip({
        content: "<div><div class='tit'>Some super titlet</div> <div class='x'>x</div><div class='con'>Some content super super long</div></h1>",
        disabled: true,
        width:550,
        tooltipClass: "myClass",
          open: function (event, ui) {
            var $element = $(event.target);
            ui.tooltip.each(function () {
                    $("div.x",this).click(function () {
                 $element.tooltip('close');
            });


            });
          },

    }).on('mouseout focusout', function(event) {
                        event.stopImmediatePropagation();
                    }); 


    $(".tooltip").click(function() {  
            $(this)
            .tooltip("open")

    });

在此处查看：http://jsfiddle.net/analienx/h639vzaw/73/

- Jakub Holasek