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>

jcuenod · Accepted Answer · 2015-05-25T10:20:52.803

2

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

edited May 25 '15 at 10:20

answered May 25 '15 at 10:10

jcuenod

55,835
14
65
102

yes yes yes !!! thanks you !!! this is what I want ! thanks for your second solution ! – FeelRightz May 25 '15 at 10:23

K K · Answer 2 · 2015-05-25T11:29:38.257

0

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.

edited May 25 '15 at 11:29

answered May 25 '15 at 10:13

K K

17,794
4
30
39

I have try your second solution but undefined value – FeelRightz May 25 '15 at 10:19
What does `$(this)` refer to? (in your answer that uses tooltipster) – jcuenod May 25 '15 at 10:22
@jcuenod refer to the `.test` , but someone has already answer a nice solution – FeelRightz May 25 '15 at 10:26
No it doesn't that's the problem with this solution. The scope is not `$(".test")` (which is why you get undefined). – jcuenod May 25 '15 at 10:27
@jcuenod yeah, didn't noticed the plugin structure. – K K May 25 '15 at 10:44
@KK `$(this)` still doesn't have the context you need it to have in your second solution. – jcuenod May 25 '15 at 11:28

Guruprasad J Rao · Answer 3 · 2015-05-25T10:22:53.513

0

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

edited May 25 '15 at 10:22

answered May 25 '15 at 10:17

Guruprasad J Rao

29,410
14
101
200

Have a look at the plugin. – jcuenod May 25 '15 at 10:21

Get attribute from tooltip

3 Answers3