Position Plotly tooltip

plotly.js
1

I need to make a chart that looks like this:

image
image.jpg1710×734 83.8 KB

I have troubles with placing hoverinfo above markers and also with the padding inside the hover box.

In plotly, hoverinfo seems always appear on the right side of the markers.

Is it possible to change its position?

I saw couple similar questions and looked through Plotly events documentation.

It is not clear for me how to use ‘plotly_hover’ and onHover events as I am using React.js and all examples are given for JavaScript implementation.

Wondering if you have some built-in flexibility for hoverinfo I am not aware of, or have examples for changing onHover events in React.js?

Thank you so much in advance,
Alisa

2

Hi @etienne, could you please show me how to do it, currently i am following to create a new div and transforming the div based on the x and y co-ordinates, it is working if the user didnt resize the window.

for example: tooltip.style.transform = translate(calc(${data.event.x}px - 56%), calc(${data.event.y}px - 35%);

but this is not helping with the above tooltip usecase or the one i asked Plotly Relayout and Popup box on the click of the line chart
and you pointed me to the different thread. How to customize Plotly Tooltip
which is also not helping.