D3 tooltip help

I’m on my 3rd D3 challenge, and each required a tooltip functionality. I am capable of implementing the tooltip, it’s only a matter of adding a function to access the data when there is a mouse event on elements, but my tooltips don’t seem to work as snappily as the ones in the examples, it’s like it takes a while for it to find the position and the data, so instead of the tooltip appearing right next to the mouse, it always seem like it’s flying over from another location, and I’m dragging it when I move the mouse.

Does anyone else have this problem? If so, how did you solve it?

I include my codepen here

tooltip.transition().duration(50).style('opacity', 0.9).style("left", d3.event.pageX + "px").style("top", d3.event.pageY + "px")

Everything after transition().duration() will interpolate to new values. Change the order around so the x and y are being set before the animation settings

tooltip.style("left", d3.event.pageX + "px").style("top", d3.event.pageY + "px").transition().duration(50).style('opacity', 0.9);
1 Like

Thanks. That makes a lot of sense