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

您可以使用make和window.innerWidth获取视口的宽度和尺寸（在我的示例中，window.innerHeight指的是this因为代码在window）
使用视口尺寸和使用window的鼠标位置，您可以确定光标左/右和上/下侧的像素空间，如下例所示。
使用属性ev.clientX/Y和offsetWidth，我们得到工具提示的维度，我们可以使用它来设置相对于光标位置的工具提示位置即可。例如，如果topLeft象限是最大的，工具提示将显示相对于光标的左上角（意味着工具提示的右下角将是＆＃34;触摸＆＃34;光标）。

我希望这个例子有帮助：）。

＆＃13;

offsetHeight

＆＃13;

 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";
};

＆＃13;

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

＆＃13;

Answer 2

这样的东西？一个switch，其条件是计算鼠标光标所在的象限。

var wM = window.innerWidth / 2;
var hM = window.innerHeight / 2;
document.addEventListener('mousemove', function(e) {
    var w = e.clientX;
    var h = e.clientY;
    var pos;
    switch (true) {
        case (w <= wM && h <= hM):
            pos = 'top-left';
            break;
        case (w <= wM && h >= hM):
            pos = 'bottom-left';
            break;
        case (w > wM && h < hM):
            pos = 'top-right';
            break;
        case (w > wM && h > hM):
            pos = 'bottom-right';
            break;
	default:
            pos = undefined;//Here you could even assign a default quadrant to relay on, in case any condition is met.
    }
    console.log(pos);
});

wM表示widthMiddle，即窗口宽度的中间点。
hM：相同，但身高。
w表示鼠标宽度/ X位置;高度/ Y h。
基于象限系统的条件的开关。

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

2 个答案: