Hover over div breaks positioning jquery css

Question

jsFiddle: http://jsfiddle.net/y78a2/

i have a element like

 <div id="hoverdiv"></div>    
 <div style="margin:0 auto;">
    <div class="hover" hovertext="This is div 1">Div 1</div>
    <div class="hover" hovertext="This is div 2">Div 2</div>
    <div class="hover" hovertext="This is div 3">Div 3</div>
</div>

css look like this

#hoverdiv{
    display:none;
    position:absolute;
    font-size:12px;
    background: rgba(0,0,0,.6);
    color: #DDD;
    border: 1px solid #999;
    padding:10px;
    z-index:10000;
}

jquery look like this

 $(document).on('mousemove','.hover',function(e){   

    var hovertext = $(this).attr('hovertext');
    $('#hoverdiv').text(hovertext)
    .css('top',e.pageY-95)
    .css('left',e.pageX+10)
    .show();

 }).on('mouseout','.hover',function(){       
 $('#hoverdiv').hide();      
 });

MY problem is that

1. The #hoverdiv is not beside the <div class="hover"> (Therefore i have to user pageY-95 AND pageX+10 but this works not perfectly for all screen sizes(for example after using those values its beside for a 1280X720 monitor but not in 1920X1280 monitor ie i have to use different values for different monitors(screen sizes)! ) .i don't know why is this happening)
2. The main problem is that whenever i am zooming out <div class="hover"> changes position(coz it has margin:0 auto ) but #hoverdiv remains in same position causing it to work unperfectly.

Therefore any help would be appreciated.

UPDATE THe fiddle is working fine after removing -95 pageY from and +10 from pageX ...but not on my pc

UPDATE2

     body{   
         background-color:#e7ebf2;
         font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;  
         font-size:11.5px;   
         margin:0 auto;
         line-height: 1.28;
         direction:ltr;
         color:#333;
         word-wrap:break-word;

    }
#main_body{
     width:900px;
     background-color: rgba(194,206,231,.5);
     padding:50px;
     box-shadow:0 0 5px rgba(194,206,231,1);     
     overflow:auto;  
     position:relative;
     top:110px;
     margin:0 auto;
}

inside body contains main body which contains these elements...

Answer 1

The problem was that the #main_body style was offsetting your absolute positioning of your #hoverdiv . Here's a fiddle that handles the situation by adding a position:relative to your container div so that we can just use the offset of #main_body to properly position the #hoverdiv : http://jsfiddle.net/y78a2/5/