tooltip position:relative

[fiorentinese]

salve io utilizzo questo tooltip
$(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; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip

//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);

if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth + 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight + 20;
}
tip.css({ top: mousey, left: mousex });
});
});
<div id="content" style="background: url(cartina/cartina.jpg) top center no-repeat #FFF; height:2400px; position:relative ">
<a href="#" class="tip_trigger"><img src="cartina/5132.gif" alt="" width="84" height="21" style="position:absolute; top:147px; left:71px; border:1px #000" /><span class="tip">H.I.S. EUROPE ITALY SRL<br />TOUR OPERATOR</span></a>
</div>
questo tipo di tooltip funziona benissimo. Il problema è che utilizzando un'immagine in position:absolute devo utilizzare un div con position:relative come contenitore. con questo tipo di soluzione le coordinate del tooltip vengono sballate penso a causa della posizione x e y del mouse. come posso fare per fare in modo che le coordinate del tooltip vengono riferite al div content e non alla pagina intera??
grazie