jquerytools tooltip filled with ajax

Question

I'm trying to load some content into the jQueryTools tooltip, depending on the trigger parent's element. Now I'm stuck with this:

 <div id="id-1">
      <div>
        <div>
          Bla <a class="trigger">trigger</a>
        </div>
        <div class="tooltip">empty</div>
      </div>
 </div>
 <div id="id-2">
      <div>
        <div>
          Bla <a class="trigger">trigger</a>
        </div>
        <div class="tooltip">empty</div>
      </div>
 </div>

note: By default, the plugin loads extended HTML in the DIV with class "tooltip" after the trigger element.

Now, the JS should tell me the name of the parent DIVs ID and load content into the tooltip, depending on that ID name.

jQuery(".tooltip").tooltip({
    onShow: function() {
        var foundId = jQuery(this).parent().parent().attr("id");
                    // generate a url from the result, e.g. exmpl.com/id-1.html
                    // put the url content in the tooltip container
    }
});

I'm pretty rubbish at JS - is there a solution to solve this?

Answer 1

This should work:

jQuery(".tooltip").tooltip({
    onShow: function() {
        var foundId = jQuery(this).parent().parent().attr("id");
        $.get('/some-url/' + foundId, function(data){
          $(this).html(data);
        });
    }
});

You should consider putting a loading graphic or something to let the user know that the data is being retrieved when they hover. That will give the client time to hit the server to get the content you want.