how to add tooltip image to more than one buttons

Question

how to add tooltip image to more than one buttons. i would like to create images that appear on mouse over the buttons, each button have separate images to popup.

I placing the buttons below; on hover they popup a image over it.

<div><a href="#">button 1</a></div>
<div><a href="#">button 2</a></div>
<div><a href="#">button 3</a></div> 

Answer 1

You can add different jquery tooltip image to the different button. In that case you need to mention which image you want to add in which button. I have added image url to data-image attribute for each button. Finally you need to call tooltip function for each button.

Don't forget to add title attribute to a tag.

HTML:

<div>
    <a href="#" data-image="http://lorempixel.com/200/200/sports/" title="">button 1</a>
</div>
<div>
    <a href="#" data-image="http://lorempixel.com/200/200/food/" title="">button 2</a>
</div>
<div>
    <a href="#" data-image="http://lorempixel.com/200/200/people/" title="">button 3</a>
</div> 

js:

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

jsfiddle link

You can also call tooltip function following way-

$( document ).tooltip({
    items: "div a",
    content: function() {
        return '<img  src="'+ $(this).data('image') +'" />';
    }
});

jsfiddle link