Problem with qTip - Tips not showing because elements load after the script

Question

I'm not very experienced with javascript, jQuery or it's plugins but usually I manage. Anyways, my client is building a site and one of its purposes is to pick up news articles from different sites and show the titles in unordered html lists. I don't have access to his code, the news articles load up rather slow(much after the site has loaded).

I'm using qTIP and the idea is that once you hover over a news title, it will generate a tooltip. This works fine in my dev environment, because I have dummy title's that are not generated from anywhere.

The problem is that once the client sets the site up in his test environment, the scripts that load the news titles into the lists are so slow, that the qTIP-script loads before there are any elements in the lists. Hence it's not aware of any <li>'s to pick up and generate tooltips from.

Is there a way make sure that ALL of the news articles are loaded before the tooltip-script loads? I think that a simple delay in loading the script is not very smart because some of the titles seem to take longer to load than others, so the delay would have to be rather long.

Answer 1

See my update at the bottom

I've been working on this problem as well, and came up with a solution similar to that provided by @Gaby. The problem with @Gaby's solution is that it doesn't create the qTip until the mouseover event has happened. This means that you won't see the qTip the first time you mouseover, but will the second time. Also, it will recreate the qTip every time you mouseover, which isn't exactly optimal.

The solution I went with is this:

$("li").live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }
    target.qtip(...);
    target.trigger('mouseover');
});

Here's what it does:

• Sets target to the li element
• Returns if that li element already has a qtip
• If no qtip on li, then applies qtip to it
• Sends mouseover trigger again so that qtip is activated

I know this is a bit hacky, but it seems to work. Also note that the 2.0 version of qTip should support live() as an option. As far as I can tell, the current 2.0 development branch doesn't yet support it.

UPDATE:

Here's the proper way to do this, direct from the qtip developer himself on the forums:

$('selector').live('mouseover', function() {
   $(this).qtip({
      overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
      content: 'I\'m a live qTip', // comma was missing here
      show: {
         ready: true // Needed to make it show on first mouseover event
      }
   });
})

So it first makes sure that you don't recreate new qtips every mouseover with "overwrite: false". Then it makes the qtip show on the first mouseover with "show: {ready: true}".

Answer 2

You should use the Live Events of the jQuery framework.

Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.

so for example you could do something like

$("li").live( 'mouseover', function(){ 
                                     $(this).qTip(...); 
                                     });

ref: http://docs.jquery.com/Events/live