jQuery UI工具提示:单击工具提示本身即可关闭

jQuery UI Tooltip: Close on click on tooltip itself

本文关键字：工具提示 UI 单击 jQuery      更新时间：2023-09-26

我有一个带有jQuery UI工具提示的页面，该工具提示最初是打开的，并且它在mouseout事件上的关闭被禁用。

现在，我希望工具提示在用户单击它本身之后关闭，而不是在显示工具提示的元素上（就像这里的许多其他答案一样）。

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

我采用上述方法是否正确？或者如何以不同的方式实现我所追求的？

JSFiddle说明我目前拥有的内容。

我找到了一个相对简单的解决方案，通过在工具提示的open事件中附加click处理程序并关闭那里的工具提示，无需破解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

试试这个：

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

试试这个：

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

请参阅此处的小提琴

根据Alexes回答，如果你只想在点击"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/

相关文章：