So I’ve got an application that includes several tooltips for providing a bit of “help” information to users.  Basically, the user hovers over a question mark image and then the help text is displayed in a stylized widget that behaves like the browser tooltip.

Being generally all about using jQuery for my ajax / UI needs, and also being generally lazy about writing more code than I have to or reinventing the wheel, I was using a jQuery tooltip plugin by Jörn Zaefferer: nice and easy to set up; simple, clean interface — works great in the simple case, where everything is visible and static on the page.

Here is the basic markup that was being used for each tooltip:

<img class='help' src='../img/help.png' title='This is my help text.  Blah blah blah' />


And the javascript:

helpTextInit = function() {
     $('.help').tooltip({showURL: false});
};


Pretty darn simple, eh?  It worked like a champ…  Until I started getting into issues with adding tooltip elements to the DOM via AJAX and showing and hiding them:

helpTextInit = function() {
     $('.help').tooltip({showURL: false});
};

displayRegEditTable = function() {
	if($('#regprefsId').val()) {
		var sid = $.getUrlVar('sid');
       //editWindow contains several 'help' img elements
		$('#editWindow').load("../inc/regprefs_fn.php",
				{	"ajaxAction": "getRegWindowInfo",
					"rid": $('#regprefsId').val(),
					"sid": sid == undefined ? 0 : sid
				},
				function(data) {
					$('#existingRegDiv #cancel').hide();
					$('#existingRegDiv #go').hide();
					$('.datePicker').datepicker({
						showButtonPanel: true,
						changeMonth: true,
						changeYear: true,
						minDate: 0,
						maxDate: maxDt,
						showOn: "both",
						buttonImage: "../images/calendar.gif",
						buttonImageOnly: true
					});
					helpTextInit();
				});
	}
	else {
		$('#editWindow').html("");
	}
};


Therein lay the rub: in testing, I found that the visible help text would work fine on page load, but as soon as the display was modified via the jQuery load call, the existing tooltips would cease to function.
It turns out that the answer was pretty straightforward (after a bit of head scratching on my part).  Jörn’s plugin works by sucking all the text out of the title attribute and then literally removing the attribute from the DOM (presumably to prevent the default tooltip behavior from occurring).  As such, by keeping my init method dirt simple and blindly recalling it for each AJAX load, I was essentially wiping out the existing tooltips since there was no title to grab data from.  The solution I chose was fairly straightforward:

helpTextInit = function() {
	$('.help').each(function() {
		if($(this).attr("title")) {
			$(this).tooltip({showURL: false});
		}
	});
};


Now we can initialize our new help elements without molesting the old ones that are working just fine.
Incidentally, I ended up deciding to swap out tools and go with the cluetip plugin instead.  Primarily I did this in order to get better control over the theming and more options, although I have to admit this little situation was probably in the back of my mind…
I’m looking forward to the built-in jQuery UI tooltip functionality, which is currently in development.


Written on April 9th, 2012 , Javascript, jQuery, Tech