Browsed by
Category: Techy

jQuery tooltips using ajax

jQuery tooltips using ajax

So you’ve got some tooltip text you want to show your user, but it’s a bit expensive to generate that text and you only really want to go to the bother of generating it when the user invokes the tooltip.

In my situation this was a bunch of numbers on a page, each of which had been calculated by a particularly long and complicated piece of business logic, and the users need to let the page ‘show its working’ now and again.  On a busy page, the agreed UI solution was to put the detail into a tooltip, but I didn’t want to have to pre-populate every cell with a tooltip, when the users probably wouldn’t bother looking at it at all, and when they did they’d only be interested in one or two cells.  So…

HTML: (on my page this bit is repeated many times)

  title="Default tooltip for when the ajax call fails"


	content: function( event, ui ) {
		var element = $( this );
		var id = element.attr("data-id");
		var tooltiptext = "Default tooltip";

		// Non-async ajax is deprecated, but we're using it
		// here because  we need to get the tooltip text
		// synchronously so that the response is processed
		// in time.
			dataType: 'text',
			url:'/tooltip/rest/' + id,
			success: function(response) {
				tooltiptext = response;
		return tooltiptext;