How Can i optimize qTip?

Question

Hey everyone!

i've been doing some profiling on an app i'm working on and qTip is really slowing it down! I love this plugin but adding the tips on document ready is taking almost 2 whole seconds (about 300 tips on the page). I know it's a lot of tips, but is there anyway obvious or not so obvious ways to speed this up?

i'm using the daily build of 2.0 here:

http://github.com/craga89/qtip

and the main function i'm using to add the tips is this:

var thingsToTip = $('.TipMe');
for (var currentItem, i = -1; currentItem = thingsToTip[++i]; ) {
    currentItem = $(currentItem);
    currentItem.qtip({
        style: {
            widget: false,
            classes: 'ui-tooltip-light' 
        },
        content: currentItem.attr('tooltip'),
        position: {

            at: 'bottomRight',
            my: 'topleft',
            adjust: {
                screen: 'flip',
                x: 0,
                y: 0
            }
        }
    });
}

now i know selecting by class is not the most efficient. but i tried switching it to a span.TipMe and it only saved about 10 miliseconds out of 2069 so for readability i took it back out. i've already switched it from using .each to being a traditional for loop. this saved me about 100 miliseconds. again, a drop in the bucket compared to the total running time.

i've been using dynaTrace to track down the slow parts.

the entire funcction takes 2069 to run. 1931 of that is the qtip function. so i'm not overly interested in speeding up the loop and selector. they are fine. i need to cut down on the time spent doing the actual qtiping.

hope it's clear what i'm looking to do.

i'm willing to try almost anything, and willing to ditch qTip if there is a more efficient tooltip plugin out there!

Answer 1

I'd say you're simply adding too many at once.

You could try loading them one at a time using window.setTimeout(); so they don't hang up the UI? Though I'm not sure that will work.

Alternatively, only apply the qTip when the user has focus on the field instead of loading them all prior...which is clearly killing your page.

What are the chances that the user will actually want to show all 300 tips? Yet you're loading them all...

Actually, why are you looping? Wouldn't this do the same thing?

    $('.TipMe').qtip({
        style: {
            widget: false,
            classes: 'ui-tooltip-light' 
        },
        content: this.attr('tooltip'),
        position: {

            at: 'bottomRight',
            my: 'topleft',
            adjust: {
                screen: 'flip',
                x: 0,
                y: 0
            }
        }
    });

Answer 2

Like the other guy said, try attaching them only once they've hovered or done whatever the requirement is.

$(".TipMe").live("mouseover", function () {
    var $this = $(this)
    if (!$this.data("toolTipAttached")) {
        $this.qtip({
            style: {
                widget: false,
                classes: 'ui-tooltip-light'
            },
            content: $this.attr('tooltip'),
            position: {

                at: 'bottomRight',
                my: 'topleft',
                adjust: {
                    screen: 'flip',
                    x: 0,
                    y: 0
                }
            }
        });

        $this.data("toolTipAttached", true);

        // the qtip handler for the event may not be called since we just added it, so you   
        // may have to trigger it manually the first time.
        $this.trigger("mouseover.qtip");
    }
});