Using qTip, I was experiencing problems with the opacity levels in the fade in/fade out effects. My tooltip would activate on mouseover and deactivate on mouseout, which could enable a user to toggle back and forth very quickly. When the tooltip is fading in, and I quickly deactivate by mouseout, the opacity level that I deactivate at will become the maximum value.

Example:

Solution 1: You can turn off effects in jquery.

jQuery.fx.off = true;

Now, your qtip will not be able to use JQuery’s effect API and will not try to fade in/fade out. Your qTip will be fully functional. But not elegant.

If you don’t want to globally turn off the effects library for jquery, you can disable the fade in/fade out effects locally by using the stop() method and creating your own “dummy” effect function which will override the default effect. Here is an example.

$('.ajax_tooltip:not(.disabled)').each(function(){
    var information = null;
    information = $(this).attr("ref");
    $(this).qtip( {
        show: {
            delay: 0,
            solo: true,
            when: {
                target: false,
                event: 'mouseover'
            },
            effect: function() {
                $(this).stop(true, true).show();
            }
        },
        hide: {
            fixed: true,
            delay: 0,
            when: {
                target: false,
                event: 'mouseout'
            },
            effect: function() {
                $(this).stop(true, true).hide();
            }
        },
        position: {
            target: false,
            corner: {
                target: 'bottomMiddle',
                tooltip: 'topMiddle'
            },
            adjust: { screen: true }
        },
        content: {
            url: information,
            text: '<p>Content Loading...</p>'
        },
        style: { name: 'normal' }
    });
});

Solution 2: You can use this updated qTip Patch. This patch fixes the opacity problem during fade in/fade out. However, you may still wish to disable effects for added performance. The contents in this file can completely replace the original content in your qTip.js. I also noticed that it fixes an issue when trying to re-size the width in IE after loading content via Ajax. Keep track of the latest version. The patch is a fix for version 1.0.0-rc3.