javascript - 检查鼠标指针周围哪一侧有更多空间

Question

我正在构建一个自定义工具提示功能，我应该在其中将视频显示为图像上的工具提示。现在，我已经完成了一些初始工作，但我一直在寻找鼠标指针周围应该显示工具提示的区域。

我的工具提示始终在鼠标光标的右下角可见，无论鼠标当前位于屏幕的哪个位置，这就是我到目前为止所拥有的:

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

其中工具提示是我的目标元素。 我正在寻找的是，我的代码应该找到屏幕上鼠标周围可用的最大区域，并调整工具提示以显示在那里。对此的任何指示都会有很大帮助。

注意:jQuery 不是一个选项，我必须构建核心 JS。

Answer 1

1. 您可以使用 window.innerWidth 和 window.innerHeight 获取视口(viewport)的宽度和尺寸(在下面的示例中this 引用 window 因为代码在 window 内运行)

2. 使用视口(viewport)尺寸和使用 ev.clientX/Y 的鼠标位置，您可以确定左/右和上/下侧的像素空间光标如下例所示。

3. 使用属性 offsetWidth 和 offsetHeight 我们得到工具提示的尺寸，我们可以用它来设置工具提示位置相对于光标位置。例如，如果左上象限最大，则工具提示将显示相对于光标的左上角(意味着工具提示的右下角将“接触”光标)。

我希望这个例子有帮助:)。

 var tooltip = this.document.getElementsByClassName("tooltip")[0];
window.onmousemove = function(ev) {
  // Getting pixel space 
  var leftPixelSpace = ev.clientX;
  var rightPixelSpace = this.innerWidth - leftPixelSpace; 
  var topPixelSpace = ev.clientY;
  var bottomPixelSpace = this.innerHeight - topPixelSpace;

  // Determining the position of topleft corner of the tooltip
  var tooltipPosX = leftPixelSpace > rightPixelSpace ? leftPixelSpace  - tooltip.offsetWidth : leftPixelSpace;
  var tooltipPosY = topPixelSpace > bottomPixelSpace ? topPixelSpace - tooltip.offsetHeight : topPixelSpace;
  
  // Setting tooltip position 
  tooltip.style.left = tooltipPosX+"px";
  tooltip.style.top = tooltipPosY+"px";
};

.tooltip {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  background-color : lightblue;
  text-align: center;
  position: absolute
}

<div class="tooltip">floating tooltip</div>