为什么定位元素在鼠标光标旁边是如此＆＃34;滞后＆＃34;？

Question

https://jsfiddle.net/m0zwwav4/

HTML：

<div id="container"></div>
<div id="tooltip">Tooltip!</div>

的CSS：

#container {
    width: 500px;
    height: 500px;
    border: solid 1px red;
}

#tooltip {
  position: absolute;
}

JS：

var container = document.getElementById('container')
var tooltip = document.getElementById('tooltip')

container.onmousemove = function(event) {
  tooltip.style.left = (event.pageX + 20) + 'px'
  tooltip.style.top = event.pageY + 'px'
}

当我将光标移动到红色框内时，工具提示似乎有点滞后（有一点延迟） - 在max os上测试chrome。是否有任何技巧可以让它看起来像移动鼠标光标一样快？

Answer 1

您可以在没有JavaScript的情况下执行此操作。

将容器的光标更改为URL，该URL是包含工具提示文本的图像：

您可以使用数据URI执行此操作：

#container {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAAAZCAIAAAAZqC9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIPSURBVFhH5Zg7csIwEIZxzgKp0kCH6KCCg0BBAQV0KdOFwpTQ5QapcAUdLqFhUgB3cX5Ji2T5IRNjBsb5ZjLj1YqVPz1sT5wgCCrl5QV/jDHHcfb7vWwqE1wP7Ha7yWRSPkPSA+v1ejgclsxQ6wHf90u2hoYewBqWyTCqBx5l6A3wgHOcgUdxESToAYuhvIckWvMz9bkfNAVXD5WsB/6+hm+vVboqhoTVPB8PdHUlqXog0XCB7wDBqi/i/oriYNEVDfekOtqKobajK2fSpgfynMPzvCWmXRLdR/bsBb5yvaW4XPZCHc0VlbWQChU1K6bqdTod2X+z2TQaDWrNgo9TG/sUcfxxTe0vezYvqBEqiihUMKoHK7VW+JQRW4EjW7LwPuU4lx17chkPlx9iSu1Zgy7OgLH77duRuSfeiX4RKmjowQ1rRUEOvG+xn5g7pWNYHb2LEf2fU1b2Bpj7JeW7UzlhuqDWg9tsNsMcyMN2w9vP/ggt+gFrhfRwuuBWr9dleBuHo9psCU9ye7ZosFzNZjN8zEC73ZYt6iJO7MWgDpNupD4ytmfjBSmmcyUx+6iK5tnTJQKuFyennh7AQN3gVVldMNzdFIjqmYRuKVkPZBrG7oaIjBnJW7IJBbWgTY+5K13VHC+/3hOg9Gj946TqAYjhx8/qBrL1Ur9aAN4N6FHQ4/Qx/IP/lJWYUutVKr8O6jUK23d1QgAAAABJRU5ErkJggg==), auto;
}

Fiddle