Displaying AJAX content in tooltips

Throughout most of this chapter, we've used the standard technique of displaying content in our tooltips, which is to reference the text stored in the title attribute of any tags that can be found on the page.

However, jQuery UI's Tooltips are able to reference content using AJAX; this allows you to generate tooltips dynamically, rather than being limited to what is displayed in your markup. In our example, we will use the content attribute to pass plain text to the widget; you could equally pass a callback function as the content's value to the tooltip.

In your text editor, remove the existing final <script> block in tooltip7.html, and replace it with the following code:

$(document).ready(function($){
  var url = "ajax.html"; 
  $("#ajaxTip").load(url);
  $('a').tooltip({
    content: '... waiting on ajax ...',
    open: function(evt, ui) {
      var elem = $(this);
      var data = $("#ajaxTip").text();
      $.ajax().always(function(event, ui) {...