Get attribute from tooltip

Question

I'm using tooltipster to generate tooltips, but I want to set the tooltip based on a data attribute from the element it's attached to. How do I get the associated data so I can set the image url as shown below. This is what I've been trying:

$(".test").tooltipster({
  var datainfo = $(this).data("info");
  content: $('<div class="desc"><img src="img/'+datainfo+'.jpg"/></div>')
});

My HTML is basically:

<div class="test tooltip" data-info="AAA">Testing</div>

Answer 1

Your parameter is json, not a function block so you need to take your datainfo line out of there (it's javascript, not json). Maybe this will work for you:

var datainfo = $(".test").data("info");
$(".test").tooltipster({
  content: $('<div class="desc"><img src="img/'+datainfo+'.jpg"/></div>')
});

I suppose you are wanting to set a number of tooltips that show images in this case, let's assume that each one has the class "test".

$(".test").each(function(){
  $(this).tooltipster({
      content: $('<div class="desc"><img src="img/' + $(this).data("info") + '.jpg"/></div>')
  });
});