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

Question

Hey,

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

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

Answer 2

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'
      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 3

Yeah I came up with something similar. I think someone posted a similar one on their forums as well. I changed the mouseover-event to mousemove so that the qtip activates on the first mouseover.

$('li').live('mousemove', function() {
  if( !$(this).data('qtip') ) {
     $(this).qtip(...)

I also agree that this is a very hacky solution, however I couldn't come up with a better one. Maybe checking and applying the qtip in the callback function that fills the li's would be better but I don't really have access to that code.