CODEWITHSUNDEEP
javascriptjqueryhtml
Matt Langlois
Matt Langlois

Reputation: 305

Tooltip based on attribute using JQuery tooltip

I am trying to make the tooltip load an image based on an attribute from the element, however there are multiple elements with different images so I am attempting to load the image based on an attribute. HTML:

<a class="item" href="#" title="" image="images/1.png">image 1.</a> 
</br> 
<a class="item" href="#" title="" image="images/1.png">image 1.</a>

JS:

$(".item" ).tooltip({ content:'<img src="somehow get image from image attribute if possible?" />' });

Fiddle: http://jsfiddle.net/vvVwD/327/

Upvotes: 0

Views: 64

Answers (2)

Venkata Krishna
Venkata Krishna

Reputation: 15112

JSFIDDLE DEMO

$(".item").tooltip({
    content: function () {
        return $(this).attr('image');
    }
});

If you need an image, just wrap the return value with image tags like below.

return '<img src="' + $(this).attr("image") + '">';

Upvotes: 0

adeneo
adeneo

Reputation: 318182

$(".item" ).each(function() {
    $(this).tooltip({ content:'<img src="'+this.getAttribute('image')+'" />' });
});

Using a data attribute, as in data-image, would be more appropriate, and more valid

<a class="item" href="#" title="" data-image="images/1.png">image 1.</a>

and then

$(".item" ).each(function() {
    $(this).tooltip({ content:'<img src="'+ $(this).data('image') +'" />' });
});

Upvotes: 1

Related Questions