CODEWITHSUNDEEP
jqueryqtip
Zack Macomber
Zack Macomber

Reputation: 6905

qTip2 shows and hides slowly

In my web app, I have many (sometimes in the 100s) cells that I have a hidden span embedded in like the following:

<td class='providerInfo' tabindex=0>
    FIRE DEPARTMENT
    <span class='HIDDEN'>
        Address: New York, NY<br />
        Phone: 123-456-7890<br />
        Type: Facility
    </span>
</td>

On page load, I associate a qTip with the hidden span to display it when focusing on the cell that has the info:

function loadProviderInfo() {

    $(document).ready(function() {
        $('.providerInfo').each(function() {
            $(this).qtip({
                content: {
                    text: function(api) { return $(this).children(".HIDDEN").html(); }
                },
                style: {
                    classes: 'ui-tooltip-blue',
                    def: 'false'
                },
                position: {
                    my: 'bottom left',  // Position my bottom left...
                    at: 'top right', // at the top right of...
                    target: $(this) // my target
                }
            });

            $(this).focusin(function() { $(this).qtip('toggle', true); });
            $(this).focusout(function() { $(this).qtip('toggle', false); });        
        });
    });
}

The qTip looks good, but it's showing and hiding really slow.

Any ideas on how to speed up the showing and hiding of the qTip? I'm OK with even not having any delay on the qTip.

Just needs to work in IE 8.

Edit 1
The fewer the cells, the quicker the qTips display.

Upvotes: 2

Views: 1483

Answers (3)

user1395243
user1395243

Reputation: 29

Check out Documentation

hide: { delay: 1000 }

1000 milliseconds (1 second)

Upvotes: 2

Applehat
Applehat

Reputation: 668

The problem is most likely with your .each loop, and all of the event listeners (more overhead).

Why not just qTip every .providerInfo element, and use qTips build in events for mouseover and mouseleave? 

function loadProviderInfo() {

    $(document).ready(function() {

        $('.providerInfo').qtip({
                content: {
                    text: function(api) { return $(this).children(".HIDDEN").html(); }
                },
                style: {
                    classes: 'ui-tooltip-blue',
                    def: 'false'
                },
                position: {
                    my: 'bottom left',  // Position my bottom left...
                    at: 'top right', // at the top right of...
                    target: $(this) // my target
                },
                show: {
                    event: 'mouseenter',
                    target: $(this)
                },
                hide: {
                    event: 'mouseleave',
                    target: $(this)
                }
            });


    });
}

I didn't test this code - I was going to do a JSFiddle for you but I couldn't get qTip to include correctly. Just try it out and see if you see any speed increase.

Upvotes: 1

idrumgood
idrumgood

Reputation: 4924

I'm guessing it's related more to the event listener than the qTip plugin (though I could be wrong).

My first thought is to try binding the events differently. Why not try jQuery's new .on() way of binding listeners? Take the listener out of your $.each loop and add it afterwards like so:

$('table').on('focusin focusout', '.providerInfo', function(e){
    if(e.type == 'focusin'){
        $(this).qtip('toggle', true);
    }else{
        $(this).qtip('toggle', false);
    }
});

Obviously if you have more than one table, use the corresponding class or id of the table in question.

If you have a lot of table cells (like it sounds you do since it slows down more the more you have) this can really lighten the load, binding one event instead of so many.

Edit This will only work with jQuery 1.7+ so if you're using an earlier version, I would recommend using .delegate() in a similar manner.

Upvotes: 1

Related Questions