Mapchart with tooltip example broken

[elibroftw]

https://www.react-simple-maps.io/examples/map-chart-with-tooltip/

[elibroftw]

Where is the source code for the map on the landing page? Showing country/content on hover is a crucial feature.

[elibroftw]

Inside App.tsx

const [tooltipContent, setTooltipContent] = useState('test');
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });

  function onMouseUpdate(e: MouseEvent) {
    setTooltipPosition({ x: e.pageX, y: e.pageY });
  }

  return <ThemeProvider>
    <MapChart setTooltipContent={setTooltipContent} setTooltipPosition={setTooltipPosition} />
    <Tooltip id='map-tooltip' float>{tooltipContent}</Tooltip>

  </ThemeProvider>;

Inside MapChar.tsx

const MapChart = ({ setTooltipContent, setTooltipPosition }: { setTooltipContent: (name: string) => void, setTooltipPosition: (position: IPosition) => void }) => {
    return <ComposableMap height={490} width={1000} data-tooltip-id='map-tooltip'>
        <ZoomableGroup>
            <Geographies geography='/features.json'>

[scho3034]

hi @elibroftw, can you refer to this issue https://github.com/zcreativelabs/react-simple-maps/issues/314 It has a solution to your problem

[elibroftw]

Not really, I updated my comment to be better. The solution you referred to uses deprecated properties and an unnecessary div.

[Socvest]

Not really, I updated my comment to be better. The solution you referred to uses deprecated properties and an unnecessary div.

So have a look at the sandbox in issue #314 which pretty much solved it for me. In your solution, you have used two <Tooltip> but really only one needs to be used.

<Tooltip id='map-tooltip' content={tooltipContent} float />