Question

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

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