Javascript 如何延迟加载（）qtip（）工具提示

我这样加载：

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

});

$（'.selector'）。每个（函数（）{
$（此）.qtip({
内容：{url:'/qtip.php？'+$（this.attr（'rel'）+'#'+$（this.attr（'div'）），文本：''}，
显示：{延迟：700，单独：真，效果：{长度：500}，
隐藏：{修复：true，延迟：200}，
职位：{
角落：{
目标：“右上角”，
工具提示：“左”
}
},
展示：{
//点击显示
solo:true//并隐藏所有其他工具提示
},
风格：{
名称：'光'，
宽度：730，边框：{
宽度：4，
半径：3，
颜色：“#5588CC”
}    
} 
});
});

这看起来好像有一个间接的原因的影响。但是qtip.php加载时没有延迟，这正是我真正想要的（以减少不必要的请求）

---

加载qtip.php之前可以延迟300毫秒吗？

您可以将其设置为使用自定义事件，然后在超时后触发该事件。如果您想等待鼠标停止，则此选项可能会有所帮助

使用hoverIntent： 如果要使hoverIntent在触发前等待更长时间，可以为其提供一个具有

interval

属性的配置对象：

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

没有插件（我还没有测试）：

---

在这里，我刚刚创建了另一个param，它使用起来更简单，我已经在qtip1中对此进行了测试（不确定qtip2）

要添加此参数，需要修改qtip中函数assignEvents（）的代码：

---

对于

qtip2

有一个参数，在初始化插件时称为

show

，它表示在

show.target

上触发

show.event

时延迟工具提示显示的时间（毫秒）

例如：

/*This tooltip will only show after hovering the `show.target` for 2000ms (2 seconds):*/

jQuery('.selector').qtip({
    content: {
        text: 'I have a longer delay then default qTips'
    },
    show: {
        delay: 2000
    }
});

---

测试了无插件选项，但没有成功：（但非常感谢！我会给它一些时间；）好的，我正要尝试hoverintent解决方案，问：我需要你发布的两个功能吗？还是只有最后一个？谢谢@托尼：你只需要其中一个。哪一个取决于你：）区别（除了省略

qtip

调用和使用函数名而不是文字）在于，在第二个示例中，用户必须保持鼠标不动300毫秒，在第一个示例中，无论默认时间是什么（我想是10毫秒）。@MatthewCrumley回答得很好。我从未想过使用自定义事件。

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

$('.qtip').qtip({
    show: { 
        when: 'mouseover',
        //customized param, when 'mouseout' the qtip will not shown and delay will clean
        cancel : 'mouseout',
        delay: 500
    }
});

function assignEvents()
{
    ...

    function showMethod(event)
    {
        if(self.status.disabled === true) return;

         // If set, hide tooltip when inactive for delay period
         if(self.options.hide.when.event == 'inactive')
         {
            // Assign each reset event
            $(inactiveEvents).each(function()
            {
               hideTarget.bind(this+'.qtip-inactive', inactiveMethod);
               self.elements.content.bind(this+'.qtip-inactive', inactiveMethod);
            });

            // Start the inactive timer
            inactiveMethod();
         };

         // Clear hide timers
         clearTimeout(self.timers.show);
         clearTimeout(self.timers.hide);
// line : 1539         

// Added code
--------------------------------------------
         // Cancel show timers
         if(self.options.show.cancel)
         {
             showTarget.bind(self.options.show.cancel,function(){
                 clearTimeout(self.timers.show);
             });
         }
--------------------------------------------

         // Start show timer
         self.timers.show = setTimeout(function(){ self.show(event); },self.options.show.delay);
      };

/*This tooltip will only show after hovering the `show.target` for 2000ms (2 seconds):*/

jQuery('.selector').qtip({
    content: {
        text: 'I have a longer delay then default qTips'
    },
    show: {
        delay: 2000
    }
});