Question

I have made a map with jQuery which is split up in many regions, and which uses the map coordinates 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 cursor is, but maybe more to the left. The problem gets worse the bigger the screen.

How can I change my code, so the tooltip 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