jQuery UI Tooltip：关闭工具提示本身

I have a page with a jQuery UI tooltip that is initially opened and its closing on mouseout event is disabled.

我有一个页面,其中包含最初打开的jQuery UI工具提示,并禁用了关闭mouseout事件。

Now, I want the tooltip to close after a user clicks on it itself, not on the element for which the tooltip is shown (as many other answers here).

现在,我希望工具提示在用户单击它之后关闭,而不是在显示工具提示的元素上(此处有许多其他答案)。

As one of the possible solutions, I thought I can add a click handler to the tooltip's div and close it from there. But I can't find a standard way to obtain the tooltip's div with the Tooltip widget API or attach the handler in some other way.

作为可能的解决方案之一,我想我可以在工具提示的div中添加一个点击处理程序并从那里关闭它。但是我找不到使用Tooltip小部件API获取工具提示div的标准方法,或者以其他方式附加处理程序。

Am I on the right track with the approach above? Or how to achieve what I am after in a different way?

我是否按照上述方法走上正轨?或者如何以不同的方式实现我的目标?

JSFiddle illustrating what I have for the moment.

JSFiddle说明了我目前拥有的东西。

3 个解决方案

#1

I've found a relatively simple solution without hacking the Tooltip API via attaching a click handler in the tooltip's open event and closing the tooltip there:

通过在工具提示的open事件中附加一个单击处理程序并关闭工具提示,我找到了一个相对简单的解决方案,而无需攻击Tooltip API:

$('.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

#2

Try this:

$(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');
            });
        });
}); 

• Updated JSFiddle
• jQuery UI Tooltip API

jQuery UI Tooltip API

#3

Try this:

  $(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');
       });
  });

See fiddle here

在这里看小提琴