Jquery tools - live tooltip for Ajax

问题:

I have a working version of tooltip (jQuery Tools - http://flowplayer.org/tools/demos/tooltip/index.html) ,

jQuery(document).ready(function() { 
jQuery('.more_info').each(function(){
   jQuery(this).tooltip({ 
       effect: 'slide',
       offset: [10, 570],
       predelay: 100, 
       position: "bottom left"}).dynamic( { 
        bottom: { 
        direction: 'down', 
        bounce: true 
    } 
    }); 
});   

});

after ajax is loaded , tooltips not working any more because , script already was loaded , i tried solution from forum http://flowplayer.org/tools/forum/30/37281 , but is not working , or is not implemented correctly

here is code :

jQuery(document).ready(function() { 
jQuery('.more_info').each(function(){
   jQuery(this).not('.tt_init').tooltip({ 
       effect: 'slide',
       offset: [10, 570],
       predelay: 100, 
       position: "bottom left"}).dynamic( { 
        bottom: { 
        direction: 'down', 
        bounce: true 
        } 
    });
    jQuery(this).not('.tt_init').addClass('tt_init'); 
});   

});

and nothing ... I'm doing something wrong , Thank you for helping ;) , sorry for my bad English

回答1:

Same solution as the following:

livequery not working with groups

Use the livequery plugin. If tooltip holds for all your pages, it should be refreshed every time. This is were livequery comes in.

Also check this link:

JQuery slimbox rebind after ajax callback

回答2:

If the problem is dynamic content you could try using the live jQuery api.

jQuery('.more_info').live('mouseover', function(){
    // may need to check here if it already has a tooltip (depending on plugin)
    jQuery(this).tooltip({ 
       effect: 'slide',
       offset: [10, 570],
       predelay: 100, 
       position: "bottom left"}).dynamic( { 
           bottom: { 
           direction: 'down', 
           bounce: true 
       } 
  }); 
});

Another solution is to manually activate tooltips for ajax content. something like:

$('#result').load('ajax/test.html', function() {
  $(this).find('.more_info').tooltip({*/...*/});
});

Or you could do this for all ajax requests using the global responders.