Jquery UI Tooltip doesn't show up

Question

What am I doing wrong?

I have this simple code:

<img width="50" height="50" src="http://www.fancyicons.com/free-icons/112/must-have/png/256/remove_256.png">

Javascript

$("img[src$='remove_256.png']").tooltip({ content : "Example"});

But tooltip doesn't display.

This example works

<img title="Example 2" width="50" height="50" src="http://www.fancyicons.com/free-icons/112/must-have/png/256/remove_256.png">

Javascript

$("img[src$='remove_256.png']").tooltip();

http://jsfiddle.net/m2u8p/3/

I don't understand why...

Answer 1

Add a title attribute to your img tag and it'll work. It can be empty because you're going to set it in javascript, but it has to exist. You can use a different attribute, but title is the default. http://jsfiddle.net/m2u8p/4/

<img class="1" width="50" height="50" title="" src="http://www.fancyicons.com/free-icons/112/must-have/png/256/remove_256.png">

<img class="2" title="Example 2" width="50" height="50" src="http://www.fancyicons.com/free-icons/112/must-have/png/256/remove_256.png">

$(".1").tooltip({ content : "Example"});
$(".2").tooltip();