Show image in jquery-ui tooltip based on href

Question

All the usual caveats apply: I'm sure this has probably been addressed in another question, but I can't find the answer.

I've a link, with href to an image. To this, I'm applying jquery UI's tooltip widget.

The tooltip should then show the image.

This works when the image is hard-coded into the content method, but not when it is worked out by attr. However, logging the attr displays the correct string.

HTML:

<a href="http://localhost.pearl-island-dev/wp-content/themes/pearlIsland/assets/img/floorplans/tip-example.jpg" class="hotspot" title="shouldbeatooltip" style="left:800px; top:500px;">HELLO</a>

JQUERY:

$('.hotspot').tooltip({
tooltipClass: 'imageHotspot',
position: { my: "center top-200", at: "right center" }, 
content:"<img src='"+$(this).attr('href')+"' />",
open: function(){console.log($(this).attr('href'))}
});

CONSOLE:

  http://localhost.pearl-island-dev/wp-content/themes/pearlIsland/assets/img/floorplans/tip-example.jpg
X > GET http://localhost.pearl-island-dev/real-estate/apartments/apartments-floorplans/undefined 404 (Not Found)

I'm not sure why the absolute reference to the image is being replaced by what appears to be a relative one - the same string hard coded into the content method does the job I want, but I need to get different values from each hotspot.

Hope someone can point me in the right direction.

Thanks in advance.

Here's a fiddle... (thanks for the suggestion)

http://jsfiddle.net/8XpMZ/1/

Answer 1

Your this is not coherent, here it refers to window but when you make a function it will be applied to your elt.hotspot so this will be set to the element the function is applied to.

Short answer : wrap it in a function

http://jsfiddle.net/techunter/8XpMZ/3/

$('.hotspot').tooltip({
        tooltipClass: 'imageHotspot',
        position: {
            my: "center top-200",
            at: "right center"
        },
        content: function(){
            return "<h1>" + $(this).attr('href') + "</h1>";
        },
        open: function () {
            $('#debugText').html($(this).attr('href'))
        }
    });

Answer 2

This will make the image as your tooltip content:

jQuery(document).ready(function ($) {
$('.hotspot').tooltip({
    tooltipClass: 'imageHotspot',
    position: { my: "center top-200", at: "right center" }, 
    content: function()
        {
            return "<img src='" + $(this).prop('href') + "' />";
        },
    open: function(){$('#debugText').html($(this).attr('href'))}});
    $('.hotspot').click(function(e){
        e.preventDefault();
    })

});