US MAP (Highchart) mouseover tooltip from another div

[Vijay Yadav]

I am having trouble with the mouseover tooltip while working on the map below.
Reference URL https://www.highcharts.com/demo/maps/da ... two-ranges

On the same page as my US map rendering, I have a table listing all the states in the US.

Problem: Just as needed, a tooltip will appear on the map chart when the user hovers their mouse over the state table (State name).

need tooltip show over the map when user mouseover the state listing table(State Name)

[jakub.j]

Welcome to our forum and thanks for contacting us with your question!

I prepared a live demo for you with solution for your problem.
On list element mouseover I find an exact point in the series and trigger the tooltip over it and on mouseout I remove the tooltip.
Simply change the document.querySelectorAll for your items list and it should be good to go, you just need to remember that names in the list must be exactly the same as the ones in the chart.

Demo: https://jsfiddle.net/BlackLabel/5sk2hdbz/

Let me know if that was what you were looking for!
Best regards
Jakub

[Vijay Yadav]

Hello Jakub

It's wonderful to see your response.
I carefully examined your answer, and it is excellent for me. I tried to include it into my code but was unable to do so.


I'm using the Highcharts React library, therefore I'm a little unsure of exactly what property I need to add an event listener to (mouseover addEventListener).
Please make a recommendation for the React library as a solution.

[jakub.j]

Hey,
That's great to hear.

I prepared a demo for you in react, the map is different but if you put your map, the logic will work without problems.
I used onMouseOver and onMouseOut events on the parent element and also react useRef to store chart data.
Everything else is pretty similar to what I send you last time.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-dom0cl

Let me know, if it works for you!

Kind Regards
Jakub

[Vijay Yadav]

I appreciate your assistance, @jakub.
Problem has been solved...

working flawlessly for me.

[jakub.j]

You're welcome!
In case of any further questions, feel free to contact us again.

Best regards
Jakub