Tooltips with images
<p>I'm playing around with <a href="https://jqueryui.com/tooltip/" rel="nofollow">tooltips of jQuery UI</a>. But, instead of a text, I want an image to be displayed. Also, the image depends on the text I hover.</p>

<p>I have a list with some numbers, all of the same class:</p>

<pre><code>&lt;a class="images" href="#" title=""&gt;Number 0&lt;/a&gt;
&lt;a class="images" href="#" title=""&gt;Number 1&lt;/a&gt;
&lt;a class="images" href="#" title=""&gt;Number 2&lt;/a&gt;
</code></pre>

<p>When I hover over the second link, an index (in this case 1) should be passed to the function, so that the number 1 will be shown.<br>
But, how can I pass the index to the function?</p>

<p>This is my temporal solution:</p>

<pre><code>var number = 1; // only a temporal solution

$(".images").tooltip({
  content: '&lt;img width="100" src="http://icons.iconarchive.com/icons/iconarchive/red-orb-alphabet/256/Number-' + number + '-icon.png" /&gt;'
});
</code></pre>

<p><a href="http://jsfiddle.net/vdtvews6/" rel="nofollow">Here is a fiddle</a>.</p>