Question

我有一个页面，其中包含最初打开的jQuery UI工具提示，并且已禁用其在mouseout事件上的结束。

现在，我希望工具提示在用户点击后自动关闭，而不是显示工具提示的元素（此处有许多其他答案）。

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

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

JSFiddle 说明了我目前的情况。

Answer 1

通过在工具提示的click事件中附加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

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

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

Answer 4

根据Alexes的答案，如果您只想按“ X”关闭：

BITFIELD_TEXTTABLE

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

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

4 个答案: