QTip problem - tips are not displayed as items are loaded after the script

Question

I am not very good at javascript, jQuery or plugins, but I usually succeed. In any case, my client is building a site, and one of his goals is to collect news articles from different sites and show headings in unordered html lists. I don’t have access to his code, news articles load quite slowly (a lot after loading the site).

I use qTIP, and the idea is that after you hover over the headline of the news, it will create a tooltip. This works fine in my dev environment, because I have a dummy header that is not generated anywhere.

The problem is that after the client installs the site in their test environment, the scripts that load news headlines into lists are so slow that they load a qTIP script before any items appear in the lists. Therefore, he is not aware of any <li> for collecting and creating tooltips.

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

Answer 1

Check out my update below.

I am also working on this issue, and came up with a solution similar to the one @Gaby provides. The problem with @Gaby's solution is that it does not create qTip until the mouseover event occurs. This means that you will not see qTip the first time you mouse, but the second time. In addition, it will recreate qTip every time you hover over the mouse, which is not entirely optimal.

The solution I went with is the following:

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

Here is what he does:

• Sets the target for the li element
• Returns if this li element already has qtip
• If there is no qtip in li then qtip is applied to it
• Sends a mouse trigger to enable qtip.

I know this is a bit of hacks, 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 branch of development 2.0 does not support it.

UPDATE:

Here is the right way to do this directly from the qtip developer 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\'ma live qTip', // comma was missing here show: { ready: true // Needed to make it show on first mouseover event } }); }) 

So, first make sure that you do not recreate new qtips for each tip with "overwrite: false". Then it displays qtip on the first hover using "show: {ready: true}".

Answer 2

You must use the Live Events framework jQuery.

Binds a handler to an event (for example, a click) for all elements corresponding to the current and future. 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 3

Not in vain, but I added show:{ready:true} to my onmouseover event. It worked in Chrome and FF.

Answer 4

Yes, I came up with something similar. I think someone posted similar information on their forums. I changed the mouseover event to mousemove so that qtip is activated the first time you hover over the mouse.

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

I also agree that this is a very hacky decision, but I could not come up with a better one. Perhaps checking and applying qtip in a callback function that fills would be better, but I really don't have access to this code.