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?

I'm a little unclear. What are you trying to load into the tooltip exactly? — Thinking Sites
– Thinking Sites, Commented Jun 15, 2012 at 18:18

Jimmy Baker · Accepted Answer · 2012-06-15 18:27:30Z

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.

answered Jun 15, 2012 at 18:27

Jimmy Baker

3,2551 gold badge27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tum Over a year ago

Excellent idea. Use the following for Bootstrap 3+: $(".tooltip").tooltip().on('shown.bs.tooltip', function() { // the above function; });

Collectives™ on Stack Overflow

jquerytools tooltip filled with ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related