对于默认工具提示行为,只需添加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;
}
扩展多个元素
多个元素的一个解决方案是更新所有工具提示跨度,并在鼠标移动时将其设置在光标下。
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;
}
};