jquery要素のマウスポインタに対する相対位置

Question

どのようにしてこれらのコードをブラウザの端に配置し、他の方向にポップアップさせるかは、ツールチップ要素の位置を設定してください。

var etichetaSpan = document.getElementById('tooltip-span'); 

window.onmousemove = function (e) { 
    var x = e.clientX, 
    y = e.clientY; 
    tooltipSpan.style.top = (y + 20) + 'px'; 
    tooltipSpan.style.left = (x + 20) + 'px'; 
}; 

Answer 1

ここでは、左右の作業フィドルです。しかし、トップ/ボトムについても同じテクニックを適用することができます。

文書の幅を取得し、ツールチップの幅を引くことによって変数max_valueを得ることによって、可能な最大位置の左値を計算します。

はこちらをご覧：

var etichetaSpan = document.getElementById('tooltip-span'); 
 

 
var width = document.body.clientWidth; 
 
var tooltip_width = etichetaSpan.clientWidth; 
 
var max_value = width - tooltip_width; 
 

 
window.addEventListener('resize', function(){ 
 
\t width = document.body.clientWidth; 
 
    max_value = width - tooltip_width; 
 
}); 
 

 
window.onmousemove = function (e) { 
 
    var x = e.clientX, 
 
    y = e.clientY; 
 
    etichetaSpan.style.top = (y + 20) + 'px'; 
 
    if(x + 20 < max_value){ 
 
    \t etichetaSpan.style.left = (x + 20) + 'px'; 
 
    } else { 
 
    \t etichetaSpan.style.left = (x - (20 + tooltip_width)) + 'px'; 
 
    } 
 
};

#tooltip-span{ 
 
    position:absolute; 
 
}

<span id="tooltip-span">Tooltip!</span>