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

I butted up against the same problem. Discovered a clever technique here that dynamically creates an element in the bodyHandler callback and then updates that in the AJAX call to neatly achieve the desired effect.

As applied to the problem above:

$("#foottip span").tooltip({
    bodyHandler: function() {
        var url = $(this).attr("href");
        var tip = $("<span/>").html("loading tip...");

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

        return tip;
    },
    showURL: false
});

Answer 2

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.