如何延迟()qtip()工具提示加载

Question

我这样加载:

$('.selector').each(function(){
$(this).qtip({
     content: { url: '/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img src="/images/loader.gif" alt="loading..." /></center>'  },

     show: { delay: 700, solo: true,effect: { length: 500 }},
     hide: { fixed: true, delay: 200 },

     position: {
     corner: {
        target: 'topRight',
        tooltip: 'left'
                }
                },
                show: {
          // Show it on click
         solo: true // And hide all other tooltips
      },
     style: {
       name: 'light',
       width: 730,border: {
         width: 4,
         radius: 3,
         color: '#5588CC'
      }    
       } 
   });

});

这看起来好像是有效果的因果关系.但qtip.php它没有延迟,这是我真正想要的(减少不必要的请求)

那么,我可以在加载qtip.php之前延迟300ms吗？

非常感谢

Answer 1

您可以将其设置为使用自定义事件,然后在超时后触发事件.该hoverIntent插件可能会有所帮助,如果你想等到鼠标停止.

使用hoverIntent:

$(selector).hoverIntent(function() {
    $(this).trigger('show-qtip');
}, function() {
    $(this).trigger('hide-qtip');
}).qtip({
    // ...
    show: {
        when: { event: 'show-qtip' }
    },
    hide: {
        when: { event: 'hide-qtip' }
    }
});

如果你想让hoverIntent在触发之前等待更长时间,你可以给它一个带有interval属性的配置对象:

$(selector).hoverIntent({
    over: showFunction,
    out: hideFunction,
    interval: 300 // Don't trigger until the mouse is still for 300ms
});

没有插件(我没有测试过这个):

(function() { // Create a private scope
    var timer = null;
    var delay = 300; // Set this to however long you want to wait

    $(selector).hover(function() {
        var $this = $(this);
        timer = setTimeout(function() {
            $this.trigger('show-qtip');
        }, delay);
    }, function() {
        if (timer) {
            clearTimeout(timer);
        }
    }).qtip({
        // ...
        show: {
            when: { event: 'show-qtip' }
        }
    });
})();