jQuery Ajax tooltip

Question

I try to do Ajax tooltip via this jQuery plugin: http://jquery.bassistance.de/tooltip/demo/

I have some thing like this:

<p id="foottip">
  <span href="/last_votes/6">footnote</span>.
</p>

<script type="text/javascript">
  $(function() {
    $("#foottip span").tooltip({
      bodyHandler: function() {
        //dj ajax here and cache
        var tip = ''
        var url = $(this).attr("href");

        $.ajax({
          url:url, success:function(html){tip = html;}, async:false
        });

        return tip
      },

      showURL: false
    });
  })
</script>   

I do it with an asynchronous Ajax request, but the solution has a problem, sometimes it redirects the page. It seems to be a bug. How can I do an Ajax tooltip with an asynchronous request? I can't find way to pass result to the tooltip asynchronously.

Answer 1

Yes, your code will not work in an asynchronous manner:

var tip = ''
var url = $(this).attr("href");
$.ajax({
    url:url, success:function(html){tip = html;}, async:true
});

// -- The problem here is that your bodyHandler function will return
// -- immediately, before the AJAX callback is called.
return tip

To solve this problem, you may have to put your tooltip rendering code inside the success callback of your $.ajax request.