使用JQuery工具提示基于属性的工具提示

Question

我正在尝试使工具提示基于元素中的属性加载图像，但是有多个元素具有不同的图像，因此我尝试基于属性加载图像。 的 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?" />' });

小提琴：http://jsfiddle.net/vvVwD/327/

Answer 1

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

使用数据属性（如数据图像）更合适，更有效

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

然后

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

Answer 2

<强> JSFIDDLE DEMO

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

如果您需要图像，只需使用如下图像标记包装返回值。

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