Jquery UI工具提示。设置超时并设置悬停事件。鼠标悬停时冻结工具提示

I've googled about 2 days and can't figure out how to set timeout for http://api.jqueryui.com/tooltip/ ???

我用谷歌搜索了大约2天,无法弄清楚如何为http://api.jqueryui.com/tooltip/设置超时?

Maybe i should use jquery hoverIntent ?

也许我应该使用jquery hoverIntent?

here is my code

这是我的代码

$('*[class*="help_"]').tooltip({
    open: function(e,o){
        $(o.tooltip).mouseover(function(e){
            $('*[class*="help_"]').tooltip('open');
        });
        $(o.tooltip).mouseout(function(e){
        });         
    },
    close: function(e,o) {}
});

7 个解决方案

#1

I also looked for a similar solution, showing the tooltip normally, but when mouseover on the tooltip it should stay (the content of a tooltip is some buttons).

我也寻找了一个类似的解决方案,正常显示工具提示,但是当鼠标悬停在工具提示上时它应该保留(工具提示的内容是一些按钮)。

I don't want a whole framework(qtip) to do just that, i'm already using jqUI all over my site.

我不希望整个框架(qtip)做到这一点,我已经在我的网站上使用jqUI。

so i did this:

所以我这样做了:

$( document ).tooltip({
  show: null, // show immediately 
  items: '.btn-box-share',
  hide: {
    effect: "", // fadeOut
  },
  open: function( event, ui ) {
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  },
  close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeTo(400, 1); 
            //.fadeIn("slow"); // doesn't work because of stop()
        },
        function () {
            $(this).fadeOut("400", function(){ $(this).remove(); })
        }
    );
  }
});

#2

I have a good solution, inspired by a jQuery forum thread :

我有一个很好的解决方案,受jQuery论坛帖子的启发:

var mouseLeaveTimer;
$('.selector').tooltip(
    open: function(){
        // make sure all other tooltips are closed when opening a new one
        $('.selector').not(this).tooltip('close');
    }
}).on('mouseleave', function(e){
    var that = this;

    // close the tooltip later (maybe ...)
    mouseLeaveTimer = setTimeout(function(){
        $(that).tooltip('close');
    }, 100);

    // prevent tooltip widget to close the tooltip now
    e.stopImmediatePropagation(); 
});

$(document).on('mouseenter', '.ui-tooltip', function(e){
    // cancel tooltip closing on hover
    clearTimeout(mouseLeaveTimer);
});

$(document).on('mouseleave', '.ui-tooltip', function(){
    // make sure tooltip is closed when the mouse is gone
    $('.selector').tooltip('close');
});

[Update:Amit Added a gist for the above solution with fixes.]

[更新:Amit添加了上述解决方案的要点和补救措施。]

#3

I like this for setting the timeout:

我喜欢这个来设置超时:

 $(document).tooltip({
     open: function(event, ui) {
         ui.tooltip.delay(5000).fadeTo(2000, 0);
     }
 });

#4

Tried this?

$( ".selector" ).tooltip({ show: { duration: 800 } });

Link: http://api.jqueryui.com/tooltip/#option-show

#5

This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip. Part of the code comes from Antonimo.

此版本可确保工具提示保持足够长的时间,以便用户将鼠标移到工具提示上并保持可见,直到鼠标移开。方便允许用户从工具提示中选择一些文本。部分代码来自Antonimo。

$(document).on("click", ".tooltip", function() {
    $(this).tooltip(
        { 
            items: ".tooltip", 
            content: function(){
                return $(this).data('description');
            }, 
            close: function( event, ui ) {
                var me = this;
                ui.tooltip.hover(
                    function () {
                        $(this).stop(true).fadeTo(400, 1); 
                    },
                    function () {
                        $(this).fadeOut("400", function(){
                            $(this).remove();
                        });
                    }
                );
                ui.tooltip.on("remove", function(){
                    $(me).tooltip("destroy");
                });
          },
        }
    );
    $(this).tooltip("open");
});

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a>

Sample: http://jsfiddle.net/A44EB/123/

#6

A variant on the response from @naveen. This has a duration, but with jQuery UI easing doesn't show at all until past half the duration (400ms in this case of 800ms). If the user doesn't keep the mouse hovered, this functions like hover intent since the tooltip would never be available. Simple, elegant way to fix the problem.

来自@naveen的回复变体。这有一个持续时间,但是jQuery UI缓动根本没有显示,直到过去一半的持续时间(在这种情况下为400毫秒400毫秒)。如果用户没有将鼠标悬停,则此功能类似于悬停意图,因为工具提示永远不可用。解决问题的简单,优雅的方法。

$( ".selector" ).tooltip({ show: { easing: "easeInExpo", duration: 800 } });

#7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title> dynamic jquery ui tooltip </title>

  <link rel="stylesheet" 
  href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <style>
            #listing {
                margin-left: 50px ;
            }
            .ui-tooltip {
                background: #AAABBB ;
                -webkit-box-shadow: 0 0 10px #aaa;
                box-shadow: 0 0 10px #aaa;
            }
            body .ui-tooltip {
                border-width: 4px;
            }
    </style>
</head>
<body>
<div id="listing">
<div class="item-heading" id="item-1" > link-1 </div>
</br>
</br>
<div class="item-heading" id="item-2"> link-2</div>
</div>
    <script>

    // courtesy of: http://*.com/a/15014759/65706
    // and : http://*.com/a/23487435/65706
    $(document).tooltip({
        items: ".item-heading"
        // set static content to the tooltip
        // , content: '<p> <a href="http://www.google.com"> go to google </a>'
        // or
        // set a dynamic content based on the selected element id
        , content: function() {
                //attribute title would do it as well for non html5
                //also any custom attribute name would do it for html5
                var el_id= $(this).attr('id');
                var id=el_id.split('-')[1];
                var d_link = "http://www.somesite.com/page.php?id=" + id ;
                d_link = "<p><a href=\"" + d_link + "\"> go to link " + 
                id + " </a></p>" ;
                return d_link ;
        }
        , open: function( event, ui ) {
                ui.tooltip.animate({ top: ui.tooltip.position().top + 4 }, "fast" );
            }
        , close: function( event, ui ) {
                ui.tooltip.hover(
                    function () {
                     $(this).stop(true).fadeTo(400, 1);
                        //.fadeIn("slow"); // doesn't work because of stop()
                    },
                    function () {
                        $(this).fadeOut("400", function(){ $(this).remove(); })
                    }
                );
        }
});
    </script>
</body>
</html>