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>

jquery元素相对于鼠标指针的位置

1 个答案: