tooltip for Ajax-loaded triggers - jQuery live? Created Mar 1, 2010

Hi Aramaki

Did you find a solution to this? I've got the same problem.

Cheers
Grant

I didn't test this but I had an idea on how to make this work, sorry if it doesn't. The idea is to check the img on mouseover if the tooltip has been init yet, if it has then don't reinit it, but if it hasn't then go ahead and init it and load it.

function InitTooltip(reload) { 
    $(".examples .info img").live("mouseover", function() { 
        if ( ! $(this).data("tooltip") ) {
            $(this).tooltip({ 
                tip: '#tooltip', 
                effect: 'toggle', 
                lazy: false, 
                fadeOutSpeed: 0, 
                predelay: 400, 
                delay: 100, 
                offset: [-5, 0], 
                onBeforeShow: function() { 
                    this.getTip().html(this.getTrigger().next().html()); 
                }, 
                position: "top center", 
                api: true 
            }).load(); 
        }
    }); 
} 

Hello guys!

The solution is rather simple. Because tooltip makses all the logic itself, calling it after each mouse[enter|over] event is not necessary.

The reason tooltip did not work before second mouseover in your example is that calling .tooltip() for the first time initializes the tooltip and internally registers another callback for mouseenter, but does not show the tooltip actually, and we must be explicit there.

The working solution:

function InitTooltip(reload) { 
    $(".examples .info img").live("mouseover", function() { 
        var me = $(this); 
        if(!me.hasClass('decorated')) {
            me.tooltip({ 
                tip: '#tooltip', 
                effect: 'toggle', 
                lazy: false, 
                fadeOutSpeed: 0, 
                predelay: 400, 
                delay: 100, 
                offset: [-5, 0], 
                onBeforeShow: function() { 
                    $("#tooltip").html(this.getTrigger().next().html()); 
                }, 
                position: "top center", 
                api: true 
            }).show(); 
            me.addClass('decorated');
        }
    }); 
} 

It's a simple modification, the code checks if selected image has a particular class and if not it initializes and shows the tooltip (see that I've added show() after tooltip initalization) and adds that class to the object so the tooltip initialization won't be processed twice.

I've worked with an example with { api: false }, for example if you want to add .dynamic(). If you want to do something with the tooltip after initialization, then change this line to:

}).dynamic().tooltip().show()

Second call to tooltip here gives us access to tooltip API.

And at last, a few words of commentary from me. I strongly discourage using this method, because it's hackish. Mouse events ARE NOT the place to put tooltip initialization but I've found no good event to use with .live() (I thought initially about load event for images but unfortunately it does not bubble). If you have a bit of time to refactor your code, just put tooltip initialization in all ajax callbacks you are using rather than doing them this way. It will speed things up a little bit.

Hope that it helps a bit!

Michal Moroz
http://lizardmedia.pl

To trigger after first mouseover I did this

	$('a.tooltip').live('mouseover', function(e){
		$(this).tooltip({
			bodyHandler: function() {
				return $(this).siblings('div.tooltip-content')[0].innerHTML;
			}
			,showURL: false
		}).triggerHandler('mouseover');
	});

Hi,

I tried out both solutions above, using JQ 1.4.2 and the latest Tooltips plugin. No joy, I'm still getting the tooltip fired only on the second mouseover. Also re-doing the tooltip initialisation on every ajax load works on the first load, but not on subsequent loads.

Any other suggestions? These Jquery Tools look great, but I do need them to work with AJAX loaded HTML.

Thanks,

Matt

i too had an issue with tooltips working from within an ajax loaded window. my solution was to hack the code. when the plugin is registered, i commented out the first two lines (308-309)

//var api = this.data("tooltip");
//if (api) { return api; }

i'm not entirely familiar with what this does, but my tooltips work great from a form loaded within my ajax window.

any reason why this might be a bad approach (other than changing the source?)

Hi! I create a plugin live for toolip...
You can see it here :http://www.eric-batarson.fr/blog/developpement-web/un-plugin-jquery-tooltip-live-110

Try it and say me if you are happy...

PS : excuse my bad english ;)

It would help if it was not french. Bad English is no problem, most people can understand :-0

.show() will show the trigger (which is already visible)

this seems to work:

.tooltip().show();

full example:

$('[id^=replenLink]').live('mouseover', function() {
var me = $(this);
if (!me.hasClass('decorated')) {
me.tooltip({
tip: '#replenTip',
onShow: function() {
var replenDetails = JSON.parse(this.getTrigger().attr('rel'));
this.getTip().html('Replen Order: ' + replenDetails.ReplenishmentOrderNumber + '<br/>' +
'Item Number: ' + replenDetails.ItemNumber + '<br/>' +
'Quantity: ' + replenDetails.Quantity + '<br/>' +
//'Comments: ' + replenDetails.Comments + '<br/>' +
'Create Date: ' + replenDetails.CreateDate + '<br/>');
},
events: {
def: "mouseenter,mouseleave", // default show/hide events for an element: "mouseenter,mouseleave"
input: "focus,blur", // for all input elements
widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button
tooltip: "mouseenter,mouseleave" // the tooltip element
}
}).tooltip().show();
me.addClass('decorated');
}
});

Here is a cleaner version of dragonee solution:

instead of:

$(".examples .info img").tooltip({ 
  // tooltip init object here
});

try:

$(".examples .info img").not('.tt_init').tooltip({ 
  // tooltip init object here
});
$(".examples .info img").not('.tt_init').addClass('tt_init');

And then place the init code both on the main page and inside the ajax-generated content

I Took what people wrote here and made it a bit simpler for my use.
Works a treat.

$(".button").live("mouseover",function(){
   if (!$(this).hasClass("tooledUp")){
      $(this).tooltip({relative: true}).dynamic({ bottom: {direction: 'down', bounce: true} });
      $(this).tooltip().show();
      $(this).addClass("tooledUp");
      }
});

Here is another solution, similar to the ones already proposed. Key differences:

• It uses jQuery .delegate() instead of .live() (faster, more efficient).
• It checks to see whether tooltips have been applied to the element using .data("tooltip") rather than the hasClass/addClass method. The tooltip plugin already attaches itself to the element using .data() with a key of "tooltip" - this is sufficient for checking whether or not the tooltip has been applied without having to add a class to the element.
• Rather than calling .show() to solve the "initial mouseover" problem, the mouseover event is re-triggered using .trigger(). A disadvantage of using .show() is that it displays the newly attached tooltip immediately, causing a different behavior if you have configured the tooltip plugin with a predelay. Re-triggering the mouseover event pushes you back through the full behavior of the tooltip plugin.

$(document).delegate("[title]", "mouseover", function() {
    if (!$(this).data("tooltip")) {
        $(this).tooltip({effect: "fade", predelay: 1000}).dynamic();
        $(this).trigger("mouseover");
    }
});

Thanks for your code, guys. I used onecowstanding's approach since it's the cleanest one. However, I had the same problem as mateo. On AJAX-loaded HTML the tooltip would only show up on the second mouseover.

I changed the event in delegate and trigger from mouseover to mouseenter and it works like a charm. According to the tooltip plugin code, tooltip is only registered with mouseenter and mouseleave, not mouseover (1.2.6).

    $(document).delegate("[title]", "mouseenter", function() {
        if (!$(this).data("tooltip")) {
            $(this).tooltip({position: "top center", offset: [-7, 10]});
            $(this).trigger("mouseenter");
        }   
    }); 

Just ran in to this issue while using Knockout along with jquery tools. Normal tooltip wire-up didn't work when my tip was embedded in a container that was databound to an observable that toggled visibility. Not exactly sure what's happening under the covers of Knockout, but it "broke" the .tooltip wireup.

However, I swapped my normal tooltip wire up for your code bernhardf, and all is well. Thanks for that.

Can't thank you enough, onecowstanding and bernhardf. This had been driving me crazy (and into some crazy coding) all morning.

This can be improved slightly:

$(document).delegate("[title]:not(.tip-init)","mouseenter",function(){
       $(this).tooltip({position: "top center", offset: [-7, 10]});
       $(this).trigger("mouseenter");
       $(this).addClass("tip-init");
    });

We use a placeholder class .decorated and we put it into our already visited objects. So the next object that matches is not ".decorated".

Translating into jquery:

// match the classes -> and not the decorated -> add the title
jQuery(".tooltip_target").not(".decorated").attr("title", tooltipDef.message);

// match the classes -> and not the decorated -> add the tooltip
jQuery(".tooltip_target").not(".decorated").tooltip();

// match the classes -> and not the decorated -> set as decorated
jQuery(".tooltip_target").not(".decorated").addClass("decorated");

We know there is a more elegant optimization but this approach eliminates all the mouseover triggering.

Hope this helps.

The way I got around doing this was creating a function and then recalling that function on .ajaxComplete()

Code:

$(document).ajaxComplete(function(){
		setupTrackToolTips();
	});

function setupTrackToolTips() {
	$('ul.display_list li.albums, .album .albumImageHolder').each(function(){
		var el = $(this)
		var ribbon = $('.ribbon', el)
		var offset = [-20, 0]
    
		if(el.hasClass('albumImageHolder')) {
			offset = [-20, -12]
		}
    
		el.tooltip({
			tip: '#'+el.attr('rel'),
			position: "bottom center",
			offset: offset,
			effect: "fadeInHide",
			relative: true,
			api: true,
			onHide: function() {
				ribbon.fadeOut(200)
			}
		})
	})
}