jquery map mousemove

Question

Hi I have made a map qith juqery, which is split up in many regions, and which uses the map cordinates to make hover areas. On hover a tooltip appears for every region. Everything works great, but there is one problem. The tooltip should follow the mouse cursor. This, I have done with mousemove, but if my map is in a div, which is fx centered on the page, the tooltip is not where the curoser is, but maybe more to the left. THe problem is worser the bigger the screen. How can I chnge my code, so the toolitip is always where the cursor is?

     $(function() {

     $("#map-container AREA").mouseover(function() {
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).css("display", "inline");
     }).mouseout(function() {

            var regionMap = "." + $(this).attr("id") + "-map";
         // Check if a click event has occured and only change the Region hover state accodringly
         if (!$(regionMap).hasClass("selected")) {
             $(regionMap).css("display", "none");
         }
     });

     $("#map-container AREA").click(function() {
         $("#map-container img.region").removeClass("selected").css("display", "none");
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).addClass("selected").css("display", "inline");
     });

 });


 $(document).ready(function() {
     $(".tooltip").hide();

     $("#map-container area").mousemove(function(e) {

     var regionList = '.' + $(this).attr('id') + '-list';
     var topheight = $(regionList).height() + 55;
         $(regionList).show();
         $(regionList).css({
             top: (e.pageY - topheight) + "px",
             left: (e.pageX - 45) + "px"
         });
     });
     $("#map-container area").mouseout(function(e) {
         $(".tooltip").hide();
     });
 });

Answer 1

It sounds like your problem might be with positioning. If you put your map inside a div to center it, then put your regionlist divs outside of that div.

The tooltip should have:

• The body as it's parent. This minimizes problems with relative and absolute positioning.
• Have the CSS "position: absolute" included.
• Have a z-index greater than the element you are hovering over