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

For qtip2 there is parameter, called show while initializing the plugin, which represents time in milliseconds by which to delay the showing of the tooltip when the show.event is triggered on the show.target.

For example:

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

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

Answer 3

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