JQuery / CSS - get the position of a relative element, position indicator, respectively

Question

I have a map showing various locations that, when frozen, will show a tooltip next to the cursor, revealing information about that location.

The map is a background image of the main ul id = "map", where each location is. The place is located css using the top and left.

#map is positioned relatively, and tooltips are absolutely positioned.

My markup is as follows:

<ul id="map"> <li><a href="#" class="harewood tip_trigger"><img src="images/marker.gif" width="12" height="12" alt="" /> <span class="tip"><img src="images/thumb.jpg" width="143" height="107" alt="" />Title<br />Click marker for details</span></a></li> 

I can show and hide the .tip region with jQuery without any problems, but I would like to get the position of the parent .tip_trigger and move the tooltip from the cursor, say, 10 pixels.

How do I change the jquery code below?

 $(document).ready(function() { //Tooltips $(".tip_trigger").hover(function(){ var pos = $("#map").position(); var width = $(".tip").width(); tip = $(this).find('.tip'); tip.show(); //Show tooltip tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" }); }, function() { tip.hide(); //Hide tooltip }); }); 

I fiddled with this for a while, tried to process the jquery documentation and just can't figure it out.

Answer 1

algiecas is right, I usually add an extra step with each

like this:

 $(document).ready(function() { //Tooltips $(".tip_trigger").each(function () { $(this).hover(function(){ // assuming you give the image the class marker var pos = $(this).find('marker').position(); tip = $(this).find('.tip'); var width = tip.width(); tip.show(); //Show tooltip tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" }); }, function() { tip.hide(); //Hide tooltip }); }); }); 

Answer 2

You should probably use the .tip_trigger position, not the #map integer

 var pos = $(this).position();