On hover custom tooltip position

Creating a custom hover template using the plotly_hover event and displaying as below screenshot. the position of the custom tooltip is not proper. Ideally, it should display the custom tooltip in the same position as currently, the original tooltip is showing. I am using the x and y positions as below:

  gd.on('plotly_hover', function (eventData) {
            Plotly.Fx.unhover(gd);
            const point = eventData.points[0];
            const labelcount = point.data.labels.length;
            var PointY = eventData.points[0].bbox.y1;
            if (labelcount / 2 > point.i) {
                PointY = eventData.points[0].bbox.y1 / 2;
            }

Fiddle demo - https://jsfiddle.net/yv8nqb9s/

1. Implemented a tooltip showing all labels and the active labels will be bolder
2. Hover template position is not accurate when I set the transform value.

How to fix the position of the tooltip and display it at the correct position?

Thanks!

[alexcjohnson]

Most of the time we put the tooltip either to the left or right of the bbox, depending on the tooltip size and the available space on either side. We don’t know how big your tooltip will be, nor whether you will allow it to spill out of the graph div, so can’t make that decision for you.

When the tooltip ends up on the right, that means its left edge is at x1 and it is vertically centered on (y0+y1)/2. When it ends up on the left its right edge is at x0, vertical alignment is the same.

[hanatharesh2712]

@alexcjohnson Thank you so much for the detailed info!

so, You mean in the event data do not have such info for tooltip positions? How can I calculate to determine where to put the Plotly hover label so that it’s outside but pointing to that region based on bbox.x0, y0, x1, y1?