CODEWITHSUNDEEP
javascriptjquerytooltiptooltipster
FeelRightz
FeelRightz

Reputation: 2979

Get attribute from tooltip

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>

Upvotes: 0

Views: 1613

Answers (3)

K K
K K

Reputation: 18099

Your plugin may not work in this way. You are passing couple of lines of code instead of key, value pair of options in the plugin. If you want data-info value, simple solution will be to bind the mouseover event and then get that attribute value.

Example:

$(".test").on("mouseover",function(){
    var datainfo = $(this).attr("data-info");
});

Note: In case the plugin removes the data-attribute, then you might need to use another attribute for getting the src of image.

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Well a small trick you can try here!!

Add a classname tooltipShow [or anything] on which you want to display tooltips. Use that class to capture hover on your element like below:

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

Upvotes: 0

jcuenod
jcuenod

Reputation: 58385

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>')
  });
});

Upvotes: 2

Related Questions