search

zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.12k stars 426 forks source link

Tooltip when hover over marker #172

Closed isabellachen closed 4 years ago

isabellachen commented 4 years ago

I'm having a really hard time achieving a hover on the markers. My first approach was with react-tooltip, based of the example with the hover for the countries. The only difference is that I want the tooltip to be shown when hover over the marker. But hovering over the marker does not trigger update of ReactTooltip.

I then try to get the position of the marker with a ref, but it, being an svg element, does not have an offsetTop. You can check out my attempts in this codesandbox.

Can anyone give me an idea of how I can achieve a tooltip on hover of the marker?

Thanks!

zimrick commented 4 years ago

Does this solve the problem? Note, I used the same approach as the geographies example (as you mentioned), but I replaced react-simple-maps v0.12 with v1. The older version will not be able to do this in the same way.

https://codesandbox.io/s/nameless-https-egrhh

isabellachen commented 4 years ago

Yep, its working with the v1 beta version!