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(){
	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){
	etichetaSpan.style.left = (x + 20) + 'px';
} else {
	etichetaSpan.style.left = (x - (20 + tooltip_width)) + 'px';
}
};

#tooltip-span{
position:absolute;
}

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