html 鼠标指针坐标,HTML-Tooltip相对于鼠标指针的位置

小编典典

对于默认的工具提示行为，只需添加title属性。但是它不能包含图像。

Hover me

在您弄清楚我是用纯JavaScript完成此问题之前，希望您发现它有用。图像将弹出并跟随鼠标。

JavaScript

var tooltipSpan = 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';

};

CSS

.tooltip span {

display:none;

}

.tooltip:hover span {

display:block;

position:fixed;

overflow:hidden;

}

扩展多个元素

多个元素的一种解决方案是更新所有工具提示span，并在鼠标移动时将其设置在光标下方。

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {

var x = (e.clientX + 20) + 'px',

y = (e.clientY + 20) + 'px';

for (var i = 0; i < tooltips.length; i++) {

tooltips[i].style.top = y;

tooltips[i].style.left = x;

}

};

2020-05-16