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.04k stars 424 forks source link

Line onMouseEnter showing tooltip in space next to line #221

Closed Josh2609 closed 3 years ago

Josh2609 commented 3 years ago

Hi, first of all, thanks for creating this great library. I want to add tooltips for a Line between 2 cities. I used the "Map chart with tooltip" example and got it working with Lines, however, when I hover over, the tooltip shows up for the line but also for empty space next to the line.

Sandbox here

Here's it working properly and showing the tooltip when hovering on the line: On line

Here below the line it still shows the tooltip: Off line - showing

Then a little further away it stops: Off line - no show

And above the line it doesn't show: Off line - not showing

It seems like it is showing the tooltip at any point in the area between the from and the to co-ordinates and underneath the line, is there any way to avoid this so that the tooltip is only shown when hovering directly over the line?

Josh2609 commented 3 years ago

Of course, just after posting this I figured it out. Although the fill is transparent, it is still there so is included in the mouseEnter event. Just have to add fill="none" to the Line.