Question

I cant figure out how to connect my custom tooltip I created to an image map. Basically, I don’t know what to put in my area tags to call the tooltip function. Everything I have tried either doesn’t work, or it shows up in the default tooltip. I have created an example on jsFiddle if someone wants to check it out. All help would be very appreciated!

Here is the example, http://jsfiddle.net/edocurug15/yNAsy/

$(document).ready(function () {
//Tooltips
$(".tip_trigger").hover(function () {
    tip = $(this).find('.tip');
    tip.show(); //Show tooltip
}, function () {
    tip.hide(); //Hide tooltip        
}).mousemove(function (e) {
    var mousex = e.pageX + 20;
    var mousey = e.pageY + 20;
    var tipWidth = tip.width();
    var tipHeight = tip.height();

area title="This is the left eye" shape="rect" coords="373,365,404,402" href="#"

What do I put in my area tags to display the tooltip???

Answer 1

You can do this by using the event target to get the text from the area that triggered the event.

$(".tip_trigger").hover(function (e) {
    tip = $(this).find('.tip');
    var tipText = $(e.target).attr('title');
    tip.html(tipText);
    tip.show(); //Show tooltip
}

See this updated fiddle:
http://jsfiddle.net/yNAsy/3/