Question

我只是想制作一个我自己[自定义]的工具提示，并查看它是如何进行的。令人震惊的是，它没有得到我想要的结果。我想要工具提示跟随我的鼠标但结束了不同的东西。下面是使用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);
});

javascript工具提示是如何工作的

1 个答案: