Use jQuery to find and add an image tooltip

Question

Hey people

Okay, what I'm trying to accomplish is a simple tool tip that, when you hover over the name of a color, shows a little image of that color. The html markup looks like this:

<label class="colorPicker">
    <input type="radio" checked="" id="20" value="20" name="id[2]">
    <img width="16" height="16" title=" DinoBlack Mat " alt="DinoBlack Mat" src="images/attributes/color/dinoblack_mat.jpg">DinoBlack Mat
</label>
<label class="colorPicker">
    <input type="radio" id="874" value="874" name="id[2]">
    <img width="16" height="16" title="XrayBlue shiny" alt="XrayBlue shiny" src="images/attributes/color/xrayblue_shiny.jpg">XrayBlue shiny
</label>

I'm using the jQuery plugin "Tooltip" and I've added following to my main js-file:

$('.colorPicker').tooltip({ 
    track: true,
    delay: 0,
    showURL: false,
    fade: 250,
    bodyHandler: function() {
        return $("<img/>").attr("src", [THE SOURCE FOR THE IMAGE]);
    }
});

The idea is simply that the image should be hidden by default. But when you hover over the text the little thumbnail shows up and makes it easy to recognize the color. The problem is I haven't got a clue how to get the src for the thumbnail. I don't know how to extract the src from the img inside the selected element. I've tried various combinations using the this keyword, but nothing seemed to work.

I've also tried to add the src path as a rel attribute to the label, but also without any success. Should be needless to say I also control the PHP-output...

I really hope you can help me. I've search the web for days without any luck. I'm getting desperate :D

/Mikkel Lund

Answer 1

$('.colorPicker').tooltip({ 
    track: true,
    delay: 0,
    showURL: false,
    fade: 250,
    bodyHandler: function() {
        return $("<img/>").attr("src", $(this).children('img:first').attr('src'));
    }
});

and you're all set :)