Как работает всплывающая подсказка JavaScript - PullRequest
Новая
       33

Как работает всплывающая подсказка JavaScript

1 голос
/ 06 апреля 2011

Я просто хотел сделать всплывающую подсказку из моего собственного [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.Некоторые ошибки, меры предосторожности при разработке.

1 Ответ

1 голос
/ 06 апреля 2011

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);
});
...