Tooltip not working on React-tooltip example

[SimmonsRitchie]

Hi there. Firstly: great package, especially for a React beginner like myself.

Unfortunately, I'm having problems with the 'with-react-tooltip' example. No tooltip is appearing as I hover over countries. I believe I've followed the example exactly:

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
} from "react-simple-maps"
import ReactTooltip from "react-tooltip"

const wrapperStyles = {
  width: "100%",
  maxWidth: 980,
  margin: "0 auto",
}

class BasicMap extends Component {
  componentDidMount() {
    setTimeout(() => {
      ReactTooltip.rebuild()
    }, 100)
  }
  render() {
    return (
      <div style={wrapperStyles}>
        <ComposableMap
          projectionConfig={{
            scale: 205,
          }}
          width={980}
          height={551}
          style={{
            width: "100%",
            height: "auto",
          }}
        >
          <ZoomableGroup center={[0, 20]} disablePanning>
            <Geographies geography="/static/world-50m.json">
              {(geographies, projection) => geographies.map((geography, i) => geography.id !== "ATA" && (
                <Geography
                  key={i}
                  data-tip={geography.properties.name}
                  geography={geography}
                  projection={projection}
                  style={{
                    default: {
                      fill: "#ECEFF1",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                    hover: {
                      fill: "#607D8B",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                    pressed: {
                      fill: "#FF5722",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                  }}
                />
              ))}
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
        <ReactTooltip />
      </div>
    )
  }
}

export default BasicMap

I have been able to successfully implement wsdm-tooltip, as suggested here in #15, however I'd prefer to use react-tooltip if possible. I also thought it might be worth flagging this in case other folks have problems with this example.

I was initially using react-tooltip 3.10.0 and I downgraded to 3.3.0 (as used in the example), but that didn't make any difference. I'm using React 16.8

Any help would be much appreciated. Thanks.

[soapnrope]

I got it working by changing data-tip={geography.properties.name} to data-tip={geography.properties.NAME}

[mojtaba-hajishah]

My workaround: Render react-tooltip near your react-simple-map component.

<React.Fragment>
      <ReactTooltip />
      <MyMapComponent />
</React.Fragment>

And in MyMapComponent, for each Geography component inside your data loop:

<Geography
       key={KEY}
       data-tip={YOUR TOOLTIP TEXT FOR THIS ITEM}
       onMouseEnter={() => {
            ReactTooltip.rebuild();     <= rebuild tooltip 
       }}
/>

"react-simple-maps": "^2.0.0", "react-tooltip": "^4.2.0",