How does a javascript tooltip work

I just wanted to make a tooltip of my own[custom] and checkout how it goes. Shockingly it didn't get the results i wanted. I wanted the tooltip to follow my mouse but ended something different. Below is the code with methods using asp.net ajax.

<div id="grid_alertlist" class="add_config_container shadows gradient"><div id="tooltip" style="background-color:Black;></div></div>

 Sys.Application.add_init(appLoaded);    
    function appLoaded(src,args){
    $addHandler($get("grid_alertlist"),"mousemove",hover);
    }

    function hover(evnt){
    div = $get("tooltip");
    div.style.display = "block";
    div.offsetLeft = evnt.screenX+'px';div.offsetTop = evnt.screenY+'px';
    }

code 1 is markup , code 2 is javascript. I attached a mousemove event handler to the grid_alert_list and made the tooltip follow my mouse. The div#tooltip moves around but not following the mouse pointer. Could i know the workings of tooltip. I seen code where this requires some mathematics like offsetTop/2 etc.

1.I Would like to know what is the reason behind it.

2.How to make the div#tooltip follow my mouse pointer wit开发者_JS百科h some padding

3.Some mistakes, precautions to take during development.

screenX is the mouse position relative to the whole screen. You'll need clientX/Y which is the mouse position relative to the document.

Here's an example of the difference: http://jsfiddle.net/PEZRH/ , http://jsbin.com/isico4/edit

$('div').mousemove(function(ev) {
    $(this).html(ev.screenX + ":" + ev.screenY + "<br/>" + ev.clientX + ":"
    + ev.clientY);
});