如何延迟（）qtip（）工具提示加载 [英] how to delay() qtip() tooltip to be loaded

问题描述

我这样加载：

  $（'。selector'）。each（function（）{
 $（this）.qtip（{
 content：{url：'/ qtip.php？'+ $(this).attr('rel')+'＃'+ $（this）.attr（'div '），text：'< center>< img src =/ images / loader.gifalt =loading .../>< / center>'}，
 
 show：{delay：700，solo：true，effect：{length：500}}，
 hide：{fixed：true，delay：200}，
 
 position：{
角：{
 target：'topRight'，
工具提示：'左'
} 
}，
显示：{
 //显示点击
 solo：true //并隐藏所有其他工具提示
}，
 style：{
 name：'light'，
 width：730，border：{
宽度：4，
半径：3，
颜色：'＃5588CC'
} 
} 
}）; 
 
 }）; 
  

这看起来好像有效果的原因。但qtip.php它没有延迟加载它是我真正想要的（减少不需要的请求）

所以，我可以在加载qtip.php之前延迟300ms吗？ / p>

非常感谢

解决方案

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

使用hoverIntent：

  $（选择器）.hoverIntent（function（）{
 $（this）.trigger（'show-qtip'）; 
}，function（）{
 $（this）.trigger（'hide-qtip'）; 
}） .qtip（{
 // ... ... 
 show：{
 when：{event：'show-qtip'} 
}，
 hide：{
时：{event：'hide-qtip'} 
} 
}）; 
  

如果你想让hoverIntent在触发之前等待更长时间，你可以给它一个带有<的配置对象code> interval property：

  $（selector）.hoverIntent（{
 over：showFunction，
 out：hideFunction，
 interval：300 //在鼠标静止300ms之前不要触发
}）; 
  

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

 （function（）{//创建一个私有范围
 var timer = null; 
 var delay = 300; //但是设置为你要等多久
 
 $（选择）.hover（function（）{
 var $ this = $（this）; 
 timer = setTimeout（function（）{
 $ this.trigger（'show-qtip'）; 
}，延迟）; 
}，function（）{
 if（timer）{
 clearTimeout（timer） ）; 
} 
}）。qtip（{
 // ... ... 
 show：{
 when：{event：'show-qtip'} 
} 
}）; 
}）（）; 
  

I Load this way:

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

});

And that looks like if there is a thelay cause of the effect. but qtip.php it's loaded with no delay wich it's what i realy want (to reduce uneeded requests)

So, can i delay 300ms before loading qtip.php ??

thanks a lot

解决方案

You could set it to use a custom event, then trigger the event after a timeout. The hoverIntent plugin might help, if you want to wait until the mouse stops.

Using hoverIntent:

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

If you want to make hoverIntent wait longer before triggering, you can give it a configuration object with an interval property:

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

Without a plugin (I haven't tested this):

(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（）工具提示加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！