how to delay() qtip() tooltip to be loaded

Question

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 which is what I really want (to reduce unneeded requests)

Can I delay 300ms before loading qtip.php?

Answer 1

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

Answer 2

Here I just created another param and it's more simple to use, I have tested this in qtip1(not sure about qtip2)

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

To add this param, you need to modify the code of function assignEvents() in qtip:

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