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

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

对于默认的工具提示行为，只需添加

title

属性。但是它不能包含图像。

<div title="regular tooltip">Hover me</div>

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

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