I designed a map that displays different locations, and when you hover over each location, a tooltip appears next to the cursor with information about that specific spot.
The map is used as a background image for the main ul element with an id of "map". Each location is represented by a list item (li), and their positions are set using CSS properties like top and left.
The #map is positioned relatively, while the tooltips are positioned absolutely.
Here's a snippet of the HTML markup:
<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>
While I can easily show and hide the .tip span using jQuery, my challenge lies in determining the position of the parent .tip_trigger element and then adjusting the tooltip to be 10px away from the cursor.
How would you modify the following jQuery code to achieve this?
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
var pos = $("#map").position();
var width = $(".tip").width();
tip = $(this).find('.tip');
tip.show(); //Display tooltip
tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" });
}, function() {
tip.hide(); //Hide tooltip
});
});
I've been experimenting with this concept for some time now, referring to the jQuery documentation, but unfortunately, I haven't been able to crack it yet.