Custom tooltip positioning

Question

I'm facing issues to properly position a custom tooltip on a Plotly.js heatmap.

I'm using the l2p method (what's this acronym standing for?) in combination with the pointNumber data to get a relative positioning within the heatmap. It looks like:

x: point.xaxis.l2p(point.pointNumber[1]),
y: point.yaxis.l2p(point.pointNumber[0])

But the problem with that is that it is relative to the top/left origin of the heatmap svg itself without the outer x- and y-axis labels, so I'm actually missing that part and wonder about whether there isn't a built-in functionality to get this positioning information directly? The problem by using external divs as tooltip area is that they are located completely outside of the chart and with that I need the information with reference to the top/left origin outside of the chart and the axis labeling.

What seems to work is to use the axis private _offset property and add it to the x and y positions above, so I get

x: point.xaxis.l2p(point.pointNumber[1]) + point.xaxis._offset,
y: point.yaxis.l2p(point.pointNumber[0]) + point.yaxis._offset

But that looks quite nasty to me. Can someone point me to some documentation or demo on how to do that "the plotly way" esp. for the heatmap?

Answer 1

One of the core developers of Plotly answered me to this question that the way I calculate the position is currently the best way of doing it and thus this issue can be closed.