18

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="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

HTML:

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

code:

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

Please tell me what I'm doing wrong.

LauraNMS
  • 2,720
  • 7
  • 39
  • 73

3 Answers3

19

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 !

soyuka
  • 8,839
  • 3
  • 39
  • 54
  • Still nothing, but where do I put this code? With $(function() { $( document ).tooltip({ }); }); or with $(document).ready(function()? – LauraNMS Mar 07 '13 at 15:21
  • Both should work, on the fiddle I used onLoad.If you watch the source code on the [jQueryUI API](http://jqueryui.com/tooltip/) website, they're doing it within a `$(function(){})`. Do you have some errors in your JS console ? Is the image path correct ? – soyuka Mar 07 '13 at 15:23
  • I see this does work, actually! But I left out an element of my problem. My link is within $('#chart').html( "image of 1 Maple St."); – LauraNMS Mar 07 '13 at 15:30
  • Woo hoo! Now the image is appearing on mouseover! One question, though. The image is now larger than the tooltip. How do I make the tooltip bigger than the image, please? – LauraNMS Mar 07 '13 at 15:46
  • Just remove the `max-width: 300px;` from `.ui-tooltip` class in the `jquery-ui.css` ;) see [fiddle](http://jsfiddle.net/soyuka/vvVwD/2/) – soyuka Mar 07 '13 at 15:55
  • 2
    I had trouble implementing this. Turns out you must have a title="" attribute for this to work – Travis Heeter Sep 01 '14 at 15:59
  • I don't understand. We're talking about jQuery here, nothing to do with MVC. – soyuka Feb 03 '16 at 13:05
7

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/

StealthTrails
  • 2,281
  • 8
  • 43
  • 67
Y__
  • 1,687
  • 2
  • 11
  • 23
  • I've corrected my code that had a wrong condition. This should work better now as shown in the jsFiddle – Y__ Mar 07 '13 at 15:14
3

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.

Lucian Minea
  • 1,300
  • 10
  • 12