[Solved] qTip in ajax content

[pauldoka]

Hi,

I load some ajax content with the load jquery function and qTip is no more working for elements in the ajax content.

I dealt with the live jquery function for the other jquery event but I don't know how to proceed with qTip.

JS Code

//Load part
$(".load_trigger").load("page.php");
 
// Tooltip part
$(".content_el").each(function(){
      jQuery(".trigger_el", this).qtip({   
 
         content:...
});
});

Do you any idea ?

Thx!

[Craig]

pauldoka, if you're apply tooltips to a page whose contents are updated dynamically, you'll need to manually call the qTip call each time the new content is loaded. This is because qTip doesn't utilise the live events just yet.

[webguyatwork]

I was just about to post the same question. Any idea of when it will support the live function call, and how it might work?

[Craig]

Live events are planned for the 1.1 release under 'Event Delegation': https://blueprints.edge.launchpad.net/qt...delegation

So far there isn't much ground work for it, since jQuery itself haven't quite figured out a good way of implementing the missing event handlers when using live events, such as focus, blur etc. Once this is resolved I'll look into using them along with event delegation, which is my primary focus during the 1.1 release cycle.

[mattcrest]

craig Wrote:...you'll need to manually call the qTip call each time the new content is loaded. This is because qTip doesn't utilise the live events just yet.

Can you explain how exactly you would manually call qTip when new content is loaded? Thanks much for this great script.

[Craig]

matt, basically you simply re-call the qTip method on the elements you want to apply them to.

[mattcrest]

I've tried doing that, but am obviously doing something wrong.

Here's my original call, which works fine for content already in the DOM:

JS Code

// message view area icon keyword tooltips
$('#messageArea li li').each(function(){
   $(this).qtip({
      content: $(this).attr('tooltip'), // will change to be the keywords, pulled from DOM when available
      style: { 
         name: 'green', // preset style
         textAlign: 'center',
         border: {width: 2, radius: 4},
         tip: {
            corner: 'bottomMiddle',
            size: {
               x: 8,
               y: 4
            }
         }
      },
      container: $('#messageArea'),
      position: {
         corner: {
            target: 'topMiddle',
            tooltip: 'bottomMiddle'
         },
         adjust: {
            screen: true
         }
      },
      show: { delay: 0}
   });
});

And then the attempt at re-calling qTip as shown below, fails miserably:

JS Code

// Send composed message
$("#sendMessage").click(function(){
   // do a bunch of stuff like take a composed message and insert it into #messageArea     
   $('#messageArea li li').qtip("enable");    // re-call qTip
});

I also tried placing the entire original function in place of this re-call method.

Any thoughts on what I'm doing wrong?

[mattcrest]

I changed things up a bit and got it dialed in now. And in hopes of helping someone else down the road, I've outlined what I did below.

I set up the function to be reusable first:

JS Code

function load_qtip(apply_qtip_to) {
   $(apply_qtip_to).each(function(){
      $(this).qtip({
// function continues...

Then was able to just call it with a callback when needed like so:

JS Code

load_qtip('#messageArea li li');

[pauldoka]

Thank you for your answer Craig. I tried to use the livequery plugin which can do a callback even if no event is specified. It works but it slows a little bit animations...

[stephencarr]

pauldoka Wrote:Thank you for your answer Craig. I tried to use the livequery plugin which can do a callback even if no event is specified. It works but it slows a little bit animations...

I found that when applying qtip to new elements on the page it breaks previously qtip'd elements on the same page. Seems there is a data array that gets wiped whenever qtip() is called and so anything previously in there and not applied on the second sweep (ie not noticed as being added by livequery) gets nulled.

I can't find a way around this using livequery. If I do an "each" application of the qtip for every matched element on the page every time livequery sees an element I could be calling it 50+ times. What I need is a livequery that executes a function just once when it sees a matched element on the page.

[Craig]

Try checking against the element within the loop if it's .data('qtip') is set i.e.:

JS Code

$('selector').filter(function(){
   return 'undefined' != $(this).data('qtip')
});
 
$('selector').qtip()

1.0 actually implements a new overwrite option that determines if existing tooltips are overridden or not on elements with prior ones attached. Quite helpful in this sort of situation but it isn't due out for a while yet!

[stephencarr]

The problem here is that livequery is applying qtip to the new found elements, which is exactly what I want it to do - but in doing this the old pre-existing elements get their .data('qtip') content wiped. Livequery does not update all matched elements on the page and if I trigger a function via livequery that does do this it will run for every matched element on the page (lots).

From what I understand of your code suggestion is that it would prevent qtip being applied twice to an already qtipped element, this is not an issue though.

[Craig]

stephen, applying tooltips to elements doesn't erase their previous qtip data, it quite literally destroys the previous tooltip and creates a new one with the options your specified in the call. Filtering elements out of your matched selected which DO have qTip data attached prevents it from re-applying the tooltips when unnecessary. Other than the above suggestion I really can't offer any more insight without seeing the page myself.

[stephencarr]

I very much appreciate your help but perhaps I am just misunderstanding something. Livequery does the filtering for me, it only applies qtips to new elements on the page, these naturally don't have qtips applied to them by default. The problem appears to be that when the qtips are applied to new elements it's breaking the ones that already have qtips applied.

Pardon the cross post, as this is already in another topic but here's my livequery:

JS Code

function userTooltips () {
   $j(".usertool").livequery(function(){
         $j(this).filter(function(){
            return 'undefined' != $j(this).data('qtip');
         });
         var urlString = ($j(this).attr("rel"));
         $j(this).qtip({ //qtip settings
            content: { url: '/user/userPopup?'+urlString, data: { slice: "userTool" }, method: 'get'}, 
            adjust: { screen: true },
            show: { when: { event: 'click' },solo: $j(".usertool") },
            hide: { when: { event: 'unfocus' }, fixed: false },
            position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}},
            style: { color: '#ffffff', width: 200, padding: 5, color: 'black', name: 'dark', tip: 'leftMiddle',border: { 'width': 7, 'radius': 5, 'color': '#000' }}
         });
   });
}

When the page initially loads all tips work. When I do an AJAX update and new elements with .usertools come in livequery sees them and runs qtip on them (and them only) and then all tips work except the tips that were previously on the page which now return:

JS Code

f(this).data("qtip") is undefined

So it does not seem to be a problem of filtering since livequery does that for me. Old existing tipped elements are not touched.

As I say before, if I could just get livequery to run once I could set it to call a function that simply applies tips to all matched .usertools but since livequery runs once for every matched element I don't really want to do that.

Again I apologise if I am missing the point somewhere, it's been a long day

[Craig]

stephen, reading over your post it occurred to me that I had misunderstood what you were asking. However, applying new tooltips to elements should not effect those that went before in any way, unless the selector is somehow also selecting those with one already applied also.

Could you double check this? If this isn't the cause I'm not too sure what to suggest. Is there a particular reason you're using liveQuery instead of regular jQuery live()?

[stephencarr]

I've done various debugs to confirm tips aren't being added twice. I'm using livequery as live requires you to use an event as a trigger and I wanted the qtips to be bound as soon as they appeared. However, I have tried switching to live() and using 'mouseover' to trigger the qtip bind (I am triggering the show with 'click') and it all seems to work error free now.

Strange that livequery seemed to conflict somehow, it seemed like the perfect setup. Thanks for your help Craig.

[min.dom]

hi,stephen,i got the same problem ,here is my answer,
Hide all tip before your re-call method:

JS Code

for (i = 0; i < $.fn.qtip.interfaces.length; i++) {
								var api = $.fn.qtip.interfaces[i];
 
								if(api && api.status && api.status.rendered ) {
				//hide all tip						
api.hide();
				}