Why positioning element next to mouse cursor is so "laggy"?

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

When I move cursor inside red box, tooltip seems to be little bit laggy (there is a little delay) - testing in chrome on max os. Is there any trick to make it faster to make it look like moving exactly fast as mouse cursor?

Answer 1

You can do this without JavaScript.

Change the container's cursor to a URL, which is an image containing the tooltip text:

You can do this using a Data 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