Javascript-форум - При наведении на элемент появление div, положение которого постоянно меняется

try, как говорится, this
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>12345</title>
<style>
body{color:#000;background-color:#fcfcfc;font-family:Georgia,'Bookman Old Style',Verdana;font-size:14px;text-align:center;}
p{text-align:left;text-indent:10px;}
#art_delete,#art_this{width:30%;border:1px dashed #ccc;padding:10px;}
#art_this{position:absolute;right:10px;}
#divhint{position:absolute;padding:20px;border:2px solid #abc;border-radius:5px;background-color:Lightsteelblue;color:#fff;font-size:16px;}
#art_comma{padding:200px 20px}
</style>
<script>
/*
часть кода заимствована отсюда:
http://javascript.ru/ui/draganddrop#koordinaty-i-knopka-myshi
*/
function $(id){return document.getElementById(id);}

function fixEvent(e) {
e=e || window.event;
if( e.pageX == null && e.clientX != null ){
var html=document.documentElement,
    body=document.body;
e.pageX=e.clientX+(html && html.scrollLeft || body && body.scrollLeft || 0)-(html.clientLeft || 0);
e.pageY=e.clientY+(html && html.scrollTop || body && body.scrollTop || 0)-(html.clientTop || 0);
}
return e;
}

function hint(obj,flag){
if(!$('divhint')){document.body.appendChild(document.createElement('div')).setAttribute('id','divhint');}
if(flag){
document.onmousemove=function(evt){ 
$('divhint').innerHTML=obj.getAttribute('data-hint');
var W=document.body.offsetWidth,
    w=$('divhint').offsetWidth,
	l=(W >= evt.pageX+10+w)?(evt.pageX+10):(evt.pageX-w-10),
	t=evt.pageY+10,
	evt=fixEvent(event);
$('divhint').style.left=l+'px';
$('divhint').style.top=t+'px';
}
}
else{
document.onmousemove=null;
document.body.removeChild($('divhint'));
}
}

function init(){
var pops=document.getElementsByClassName('pop_over');
for(var i=0;i < pops.length;i++){
pops[i].onmouseenter=function(){
hint(this,true);
}
pops[i].onmouseleave=function(){
hint(this,false);
}
}
}

window.onload=init;
</script>
</head>
<body>
<div class="pop_over" id="art_delete" data-hint="Эта часть статьи описывает оператор delete">
<p>При успешном выполнении оператор delete удаляет свойство из объекта.</p>
<p>При этом delete не меняет прототип объекта, даже если там есть свойство, совпадающее по названию с удаляемым.</p>
<p>Некоторые свойства объектов не могут быть удалены. В спецификации такие свойства обозначены флагом DontDelete.</p>
</div>
<div class="another" id="art_comma">
<p>Оператор "запятая" вычисляет оба операнда и возвращает значение второго</p>
<p>Как правило, он используется, когда хочется включить несколько выражений в то место, где должно быть одно. Например, указать несколько параметров для цикла for.</p>
<p>Допустим, в arr хранится двумерный массив (матрица) по 10 элементов с каждой стороны. Следующий код использует оператор запятая для того, чтобы увеличить две переменных сразу.</p>
</div>
<div class="pop_over" id="art_this" data-hint="Оператор this - всему голова">
<p>Оператор this возвращает ссылку на объект, являющийся текущим контекстом вызова. Это позволяет обращаться к свойствам "текущего" объекта: this.property.</p>
<p>Текущий объект не является жестко фиксированным и зависит от контекста вызова функции. Он является, своего рода, скрытым параметром.</p>
<p>Есть четыре различных варианта его передачи.</p>
</div>
</body>
</html>