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

【问题标题】：Why is my react-tooltip sometimes displaying on the parent element?为什么我的 react-tooltip 有时会显示在父元素上？
【发布时间】：2021-04-29 22:30:00
【问题描述】：

我在这里制作了与covid相关的旅行地图：Where Can We Go Now

这是一个静态的 react JS 网站，billy basic，create-react-app。它使用了优秀的React Simple Maps（感谢创建者）和react-tooltip。

预期行为：

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

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

问题：

。 . .曾经以npm run build 之类的作品发布，但奇怪的事情发生了。

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

一些相关代码：

Index.js (sn-p)：

  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 (sn-p)：

    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="" 的位置和内容。还有，用头撞墙。

【问题讨论】：

标签： javascript reactjs maps tooltip react-simple-maps

【解决方案1】：

我的问题不准确，因此没有提供问题根源的相关详细信息。

我使用 github 操作发布，这是修复：

yarn install --frozen-lockfile

冻结的锁定文件是确保我使用的是我在本地测试的相关软件包的确切版本的关键。我错误地建议我使用的是 npm。

【讨论】：