Question

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

也许我应该使用jquery hoverIntent？

这是我的代码

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

Answer 1

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

我不希望整个框架（qtip）做到这一点，我已经在我的网站上使用了jqUI。

所以我这样做了：

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

Answer 2

我有一个很好的解决方案，灵感来自a jQuery forum thread：

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

[更新：Amit Added a gist了解上述解决方案的修复程序。]

Answer 3

我喜欢这个来设置超时：

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

Answer 4

试过这个？

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

链接：http://api.jqueryui.com/tooltip/#option-show

Answer 5

此版本可确保工具提示保持足够长的时间，以便用户将鼠标移到工具提示上并保持可见状态直到鼠标移开。方便允许用户从工具提示中选择一些文本。部分代码来自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>

示例：http://jsfiddle.net/A44EB/123/

Answer 6

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

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

Answer 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://stackoverflow.com/a/15014759/65706
    // and : http://stackoverflow.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>

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

7 个答案: