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>

This will help you http://stackoverflow.com/questions/15274123/how-do-you-add-an-image-to-a-jquery-tooltip?answertab=active#tab-top — Parth Trivedi, Jan 05 '16 at 13:18

score 0 · Answer 1 · answered Jan 05 '16 at 14:28

You can use JqueryUI tooltip to create Customizable, themeable tooltips.

Here is a fiddle that has 3 buttons and a random image will popup when hovered on it.

HTML:

<a id="id1" href="#" title="">button 1</a>
<a id="id2" href="#" title="">button 2</a>
<a id="id3" href="#" title="">button 3</a>

Javascript with JqueryUI:

$( "#id1" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=1" />' });
$( "#id2" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=2" />' });
$( "#id3" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=3" />' });

I'm not sure whether this is what you're looking for?!

Shishir Morshed · Accepted Answer · 2016-01-05T15:01:26.520

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

how to add tooltip image to more than one buttons

2 Answers2