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.

Osrock

where is your code? how do you initiate qTip? are you loading the news titles with ajax? – Tita

I'm sorry I thought I was clear but I do not have access to the code which loads the news titles. – Osrock

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}".

Tittup

I've just edited my answer to include an even better solution. – Tittup

this doesn't work, qtip still doesn't appear, no error is raised, the event fires, the qtip loads even. – Alfonso

@Alfonso - I answered this 4 years ago and many things have changed. I no longer use qtip, so unfortunately I can't really help. I do know that jquery's .live() function has been deprecated and you should use .on() instead. Maybe this will help you: api.jquery.com/live – Tittup

When I use this approach, but using on instead of live, since the last one is deprecated, and I have got the error: Uncaught TypeError: Cannot read property 'pageX' of undefined – Keppel

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

Penna

+1 This is definitely the way to go. This prevents you from needing to re-bind all of your events as the ajax adds to your page. – Raja

Thanks so much, I was thinking about using bind(), didn't know about this one. – Osrock

you are welcome, i only recently found out about it myself. but it is a life-saver – Penna

Answer 3

Not for nothing, but I just added the show:{ready:true} in my onmouseover event. That got it working in Chrome & FF.

Underexposure

Answer 4

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.

Osrock