为什么我的react-tooltip有时会显示在父元素上？

Question

我在这里做了一个covid相关的旅行地图：Where Can We Go Now

这是一个静态的react JS网站，使用create-react-app的billy basic。它特别使用了优秀的React Simple Maps (创建者的荣誉)和react-tooltip。

预期行为：

在本地，工具提示在使用npm run start进行测试时工作良好

我将鼠标移到某个国家/地区时，工具提示会显示一些相关信息，大致显示鼠标在地图上的位置。

问题是：

。。。一旦用npm run build发布，就会有一些奇怪的事情发生。

请按照链接到网站观察，但简而言之，如果海(即不是国家的区域-因此不是由topojson中的svg定义的)被单击，则工具提示位于整个地图本身的顶部中心。

一些相关的代码：

Index.js (代码片段)：

  const [content, setContent] = useState("");
  return (
    <div><h1> Where can we go on holiday ?* </h1>
      <MapChart setTooltipContent={setContent}/>
      <ReactTooltip html={true}>{content}</ReactTooltip>
    </div>
  );
}

MapChart.js (代码片段)：

    return (
      <div>
        <p><small>*Right now in the UK: {data.headlineAdviceNow}   Last updated at {updateString}</small></p>
      <ComposableMap
        
        projectionConfig={{
          rotate: [-40, -30, 10],
          scale: 1600
        }}
        width={mapWidth}
        height={mapHeight}
        style={{ maxWidth: "100%", height: "80vh", background: "#b3b3b3", borderStyle: "solid", borderColor: "white", margin: 0.5,
        borderRadius: 20 }}
      >
        <ZoomableGroup zoom={zoom} center={center} translateExtent={[
          [0, 0],
          [mapWidth, mapHeight]
        ]} maxZoom={15} data-tip="">
        <Sphere stroke="#E4E5E6" strokeWidth={0.5} />
        <Graticule stroke="#E4E5E6" strokeWidth={0.2} />
        
        {!loading && (<Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map((geo) => {
                const d = data.countries.find((s) => s.country.iso_a3 === geo.properties.ISO_A3);
                return (
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                    style={{
                      default: {
                        outline: "none",
                        stroke: "grey",
                        strokeWidth: "1",
                        strokeLinecap: "butt",
                        fill: d ? colorScale(d[attr]) : "#F5F4F6"
                      },
                      hover: {
                        outline: "none",
                        stroke: "black",
                        strokeWidth: "3",
                        strokeLinecap: "butt",
                        fill: d ? colorScale(d[attr]) : "#F5F4F6"
                      },
                      pressed: {
                        outline: "none"
                      }
                    }}
                    onMouseEnter={() => {
                      const NAME = geo.properties.NAME;
                      const travelIndex = d ? d["indexDescription"] : "Unknown";
                      //const border = d ? d["borderStatusString"] : "Unknown";
                      const returnStatus = d ? (fromCountry==="GBR" ? d["ukCategory"] : "TBC") : "Unknown";
                      const vaccinePc = d ? d.vaccineData["total_vaccinations_per_hundred"] + "%" : "NK";
                      const arrival = (() => {try{ return d["restrictionsFrom"][data["iomKeys"].indexOf(fromCountry)].split("-") } catch {return [4,""]}});
                      const arrivalLevel = rstrctLkup[arrival()[0]]["short"]
                      //const arvlRtns = arrival()[1].length===0 ? arrival()[1] : arrival()[1].split(",")
                      //var text =""
                      //var i;
                      //for (i = 0; i < arvlRtns.length; i++) {
                      //  if (data["restrictionDefs"][arvlRtns[i]]) {
                      //  if (i===0) {text="<br />Arrival Details:<br />"}
                      //  text += data["restrictionDefs"][arvlRtns[i]] + "<br>";
                      //}}
                      
                      setTooltipContent(`<b>${NAME.toUpperCase()}:</b> ${travelIndex}<br /><p style="text-align: left"><b>RISK FACTORS</b><br />Vaccinated: ${vaccinePc}<br /><br /><b>CURRENT RESTRICTIONS</b><br />Entry: ${arrivalLevel}<br />Return: ${returnStatus}</p>`);
                    }}
                    onMouseLeave={() => {
                      setTooltipContent("");
                    }}
                  />
                );
              })
            }
          </Geographies>
        )}
        </ZoomableGroup>
      </ComposableMap>
      </div>
    );
  };  

export default memo(MapChart);

我尝试过的：

设置工具提示位置的变化，以及移动data-tip=""的位置和内容。还有，头撞墙。

Answer 1

我的问题不准确，所以没有提供相关的细节，这是问题的根源。

我使用github操作发布，修复方法如下：

yarn install --frozen-lockfile

冻结的锁文件是确保我使用的相关包的版本与我在本地测试时完全相同的关键。我错误地暗示我正在使用npm。