javascript 工具提示如何工作

Question

我只是想制作一个我自己的 [custom] 工具提示并检查它是如何进行的。令人震惊的是，它没有得到我想要的结果。 我希望工具提示跟随我的鼠标，但以不同的方式结束。下面是使用 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';
    }

代码 1 是标记，代码 2 是 javascript。我将 mousemove 事件处理程序附加到 grid_alert_list 并让 tooltip 跟随我的鼠标。 div#tooltip 移动但不跟随鼠标指针。 我能知道工具提示的工作原理吗？我看到代码需要一些数学知识，例如offsetTop/2 等。

1.我想知道这是什么原因。

2.如何使div#tooltip跟随我的鼠标指针并带有一些填充

3.开发过程中的一些错误，注意事项。

Answer 1

screenX 是鼠标相对于整个屏幕的位置。您需要 clientX/Y，这是鼠标相对于文档的位置。

以下是差异示例： http://jsfiddle.net/PEZRH/ , http://jsbin.com/isico4/edit

---

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