jQuery UI Tooltip: Close on click on tooltip сам

Question

У меня есть страница с всплывающей подсказкой jQuery UI, которая изначально открыта, и ее закрытие на mouseout событие отключено.

Теперь я хочу, чтобы всплывающая подсказка закрывалась после того, как пользователь нажимает на нее сам, а не на элемент, для которого показана всплывающая подсказка (как и многие другие ответы здесь).

Как одно из возможных решений, я подумал, что могу добавить обработчик click в div tooltip и закрыть его оттуда. Но я не могу найти стандартный способ получить div tooltip с помощью API-интерфейса виджета Tooltip или связать обработчик каким-то другим способом.

Есть ли я на правильном пути с подходом выше? Или как добиться того, что я делаю по-другому?

JSFiddle, что я имею на данный момент.

Answer 1

Я нашел довольно простое решение без взлома Tooltip 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

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

• Updated JSFiddle
• jQuery UI Tooltip API

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

См скрипку here