how do you add an image to a jquery tooltip
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.
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 !
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/