LauraNMS LauraNMS - 10 months ago 44
jQuery Question

how do you add an image to a jquery tooltip

I haven't seen this exact question addressed...if it has been, just please point me to it.

I'm using jquery's ui tooltip. I have one link that when you mouseover it, I'd like to show an image. Nothing has worked for me so far.

ui code in header:

<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>


(see <a id='riverroad' href='#' title='' >image of 1 Maple St.</a>)


$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg/>" });

Please tell me what I'm doing wrong.

Answer Source

try this one :


<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>


$( "#riverroad" ).tooltip({ content: '<img src="yourImagePath" />' });

See the working fiddle.

Jquery 1.9.1 and JqueryUI 1.9.2 are included of course. Check if your image path is correct by the way.

Edit : You told me that you're setting the link with jQuery, see this second working example :


<div id="content">    


$(document).ready(function() {
   $("#content").html('<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>');
   $("#content #riverroad").tooltip({ content: '<img src="" />' }); 


Here is the new fiddle !