how do you add an image to a jquery tooltip

Question

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

Answer 1

Just pass the HTML content directly in title and you'll be fine.

<a id="riverroad" href="#" title="<img src='http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png'" >image of 1 Maple St.</a>

Just remember to use single quotes inside title.

Answer 2

try this one :

Html

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

JQuery

$( "#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 :

Html

<div id="content">    
</div>

JQuery

$(document).ready(function() {
   $("#content").html('<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>');
   $("#content #riverroad").tooltip({ content: '<img src="http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png" />' }); 

});

Here is the new fiddle !

Answer 3

First, you are missing the closing quote of your src tag. Your code should be :

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

Moreover, this should be working with the following code as shown on jQueryUI's website :

HTML :

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

JS :

<script>
  $(function() {
    $( document ).tooltip({
      items: "a",
      content: function() {
        var element = $( this );
        if (element.attr('id') === 'riverroad') {
          return "<img class='map' src='./images/myimage.jpg' />";
        }
      }
    });
  });
</script>

Here is a demo on jsFiddle : http://jsfiddle.net/QgPEw/1/