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

Question

我用谷歌搜索了大约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

我有一个很好的解决方案,受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');
});

[更新:Amit 添加了上述解决方案的要点和修复.]

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