Tooltip positioning with Callout function

Hi I am trying to use the callout function from this notebook in my own notebook.

For some reason, it renders on the top left part of the container instead of where my mouse is positioned. Am I doing something wrong with this line

tooltip.attr(“transform”, translate(${d3.pointer(event, this)}));

or am I mixing versions of D3 together? I can’t figure it out.

Thanks in advance for the help!

Hi Scott!

If you want the tooltip to align with the circles, you could use the data positions like this:

tooltip.attr("transform", `translate(${ d.x },${ d.y + d.r })`);

The call to d3.pointer(event, this) will return the mouse coordinates relative to this, which in this case is the node group. This is why the tooltips are all appearing in the upper left.

If you want the tooltip to track the mouse you can provide a different target (second parameter to d3.pointer) or you can add the x and y values returned by d3.pointer to d.x and d.y.

Hope this helps!

1 Like

Ah this makes so much more sense. Thank you!

1 Like