Tooltip Issue

[myselfronin]

When I click on the map outside of any country then the tooltip renders at the border surrounding the map.

[myselfronin]

[faltherr]

I also noticed this and I am curious about what is causing this behavior. Did you find a work around? Perhaps there is a hack that can disable the click handler that is changing the focus to the div containing the class name of rsm-svg?

[faltherr]

My solution is to disable the synthetic event for onMouseDown in the <ComposableMap/> component. This cancels the mouse down event triggering focus which draws a rectangle around the selected geography. Additionally, this allows me to avoid the style prop setting outlines to 'none'.

<ComposableMap
      projection={projection}
      data-tip=""
      onMouseDown={e=>e.preventDefault()}
>

[adamklepacz]

@faltherr Did you find any working solution on this? I'm facing the same issue but the solution with onMouseDown={e=>e.preventDefault()} didn't work for me.

I'm using "react-simple-maps": "2.3.0".

[faltherr]

I am also using RSM v2.3.0. Unfortunately, I did not find a great solution and what I suggested only seems to work without using the <ZoomableGroup> component. Here is a codepen example suppressing the event default:

https://codesandbox.io/s/remove-map-outline-2chro?file=/src/styles.css

I assume there is a trigger on the <ZoomableGroup>. I tried onClick and onFocus but was not able to prevent the tooltip from repositioning. You can at least get rid of the border around the entire svg with CSS.

.rsm-svg:focus {
  outline: none !important;
}

I am interested to see what property is causing the tooltip to reposition so if you find anything it would be great to share it on this thread. I'm sure others are experiencing this issue.

[JonLunde]

I fixed this by moving the data-tip attribute to a container surrounding the ComposableMap component. This solved the focus issues aswell, no need for styling or preventDefault().

[EdvinTr]

I also ran in to this exact issue and the previous solutions posted here did not work. I solved it after a while by doing the following:

<ComposableMap
    data-tip=""
    onClick={(e: any) => {
      // The map container has a width and the SVGs for countries do not. 
      // E.g., checks if the user is clicking on the map itself.
      if (e.target.width) {
        setTooltipContent(null);
      }
    }}
  >

Then in the parent container you conditionally render the tooltip:

const [tooltipContent, setTooltipContent] = useState<string | null>(null);
return (
  <div>
    <MapChart setTooltipContent={setTooltipContent} />
    {tooltipContent && <ReactTooltip>{tooltipContent}</ReactTooltip>}
  </div>
);