NextJS14+React18中ReactTooltip在React-Simple-Maps SVG地图上不显示

问题现状 #

使用 React-Simple-Maps 渲染分级统计图，尝试通过 ReactTooltip 在鼠标悬停选区时显示选区全名及“查看详情”选项，但目前选区名称无法渲染。已知 onMouseEnter 事件能正常打印选区名称，但 tooltip 无内容显示。

排查与修复步骤 #

1. 初始化 ReactTooltip（关键） #

ReactTooltip v5+ 版本需手动初始化，否则无法正确绑定触发元素。修改 MapSection 组件：

import React, { useState, useEffect } from "react";
import MapChart from "./MapComponent";
import ReactTooltip from "react-tooltip";

const MapSection = () => {
  const [content, setContent] = useState("");

  useEffect(() => {
    ReactTooltip.rebuild(); // 组件挂载时初始化 tooltip
  }, []);

  return (
    <div>
      <MapChart setTooltipContent={setContent} />
      <ReactTooltip data-id="map" content={content} float />
    </div>
  );
};

export default MapSection;

2. 修正 Geography 组件的触发属性 #

React 中 kebab-case 属性需加引号，且 data-tip 不能省略（哪怕是空值），否则 ReactTooltip 无法识别触发源：

<Geography
  key={geo.rsmKey}
  geography={geo}
  onMouseEnter={() => {
    setTooltipContent(geo.properties.name);
  }}
  onMouseLeave={() => {
    setTooltipContent('');
  }}
  data-tip="" // 必填属性，不能为空或省略
  data-for="map"
  style={{
    default: {
      fill: '#D6D6DA',
      outline: 'none',
    },
    hover: {
      fill: '#F53',
      outline: 'none',
    },
    pressed: {
      fill: '#E42',
      outline: 'none',
    },
  }}
/>

3. 解决样式层级与裁剪问题 #

• 确保地图容器 #map 未设置 overflow: hidden，避免 tooltip 被裁剪。
• 为 tooltip 设置足够高的层级，防止被地图元素遮挡：

/* 全局样式中添加 */
.__react_component_tooltip {
  z-index: 9999 !important;
}

4. 实现带“查看详情”的自定义 tooltip #

若要显示样式化的自定义内容，可将状态改为对象，在 tooltip 中渲染 JSX：

// MapSection 组件
const [tooltipData, setTooltipData] = useState(null);

// MapChart 组件的 onMouseEnter 事件
onMouseEnter={() => {
  setTooltipData({ name: geo.properties.name, id: geo.rsmKey });
}}
onMouseLeave={() => {
  setTooltipData(null);
}}

// 渲染自定义 tooltip
<ReactTooltip data-id="map" float>
  {tooltipData && (
    <div className="p-2 bg-white rounded shadow-md">
      <p className="font-medium">{tooltipData.name}</p>
      <button 
        className="mt-1 text-blue-500 hover:underline"
        onClick={() => console.log('查看详情:', tooltipData.id)}
      >
        查看详情
      </button>
    </div>
  )}
</ReactTooltip>

关键注意点 #

• 确认 ReactTooltip 版本：v4 与 v5 API 存在差异，需匹配当前版本使用对应方法。
• SVG 元素事件：Geography 是 SVG 元素，已确认 onMouseEnter 可触发，此点无需额外排查。
• 状态传递：确保 setTooltipContent 能正确将子组件状态传递给父组件。

内容的提问来源于stack exchange，提问作者Haider Muhammad