ReactTooltip (пакет npm) не отображается и не отображается в NextJS 14, React 18 при наведении курсора на интерактивный SVG карты, отображаемой с помощью React-Simple-Maps

Я использую React-Simple-Maps для манипулирования и рендеринга SVG-карты (карты хлоропета). Я использую React-Tooltip для отображения всплывающей подсказки по каждому округу на карте, отображая их полные имена и опцию «более подробно». До сих пор мне не удалось отобразить даже имена, не говоря уже о полностью стилизованном div с вышеупомянутыми деталями.

Используя документацию, доступную на сайтах обеих соответствующих библиотек, я сделал что-то вроде этого (безуспешно). Вот ссылка на коды и коробку, по которой я перешел: https://codesandbox.io/s/map-chart-with-tooltip-forked-42sldc?file=/src/index.js

Код компонента Map (обратите внимание, что с помощью mouseEnter мне удалось записать имена в консоль, но я не знаю, почему он не настраивает содержимое всплывающей подсказки или есть ли проблема в чем-то еще). Игнорируйте маркер (вы можете закомментировать его, если хотите запустить или протестировать код).

const MapChart = ({
  setTooltipContent,
}: {
  setTooltipContent: (content: string) => void;
}) => {
  return (
    <div id='map' className=''>
      <ComposableMap className='stroke-black'>
        <Geographies
          geography = {SgMap}
          fill='#D6D6DA'
          stroke='#FFFFFF'
          className=''
        >
          {({ geographies }) =>
            geographies.map((geo) => (
              <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',
                  },
                }}
              />
            ))
          }
        </Geographies>
        {ConstituenciesNamesandCoordinates.map(({ name, coordinates }, i) => (
          <Marker key = {i} coordinates = {coordinates}>
            <text
              textAnchor='middle'
              y = {-10}
              className='font-times text-[0.5rem] text-black'
              style = {{
                userSelect: 'none',
                pointerEvents: 'none',
                fontWeight: 100,
              }}
            >
              {name}
            </text>
          </Marker>
        ))}
      </ComposableMap>
    </div>
  );
};

Код, в котором я пытаюсь отобразить всплывающую подсказку

import MapChart from "./MapComponent";


const MapSection=()=> {
  const [content, setContent] = useState("");
  return (
    <div>
      <MapChart setTooltipContent = {setContent} />
      <Tooltip data-tooltip-id = "map" content = {content} float />
    </div>
  );
}


export default MapSection;

Любая помощь приветствуется. Версия для песочницы работает; кстати, у меня почему-то нет.

Посмотрите эту обновленную версию песочницы, которую вы предоставили, в качестве альтернативы использованию всплывающей подсказки с data-tooltip-id и data-tooltip-content, которая, по моему мнению, лучше подходит для вашего варианта использования. Посмотрите, работает ли это локально для вас. Если это не так, это связано с настройкой вашего проекта. Пожалуйста, откройте выпуск на GitHub с дополнительной информацией о настройке вашего проекта и, возможно, даже с примером репозитория, чтобы мы могли его воспроизвести.

Gabriel Jablonski 20.06.2024 23:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
58
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы используете react-tooltip v5.13.0 или новее, то типичным базовым использованием будет добавление атрибута id к компоненту react-tooltip; <Tooltip /> (например, my-tooltip), например так:

import { Tooltip } from 'react-tooltip'

// ...

<Tooltip id = "my-tooltip" content = {content} float />

А затем внутри каждого сопоставленного компонента <Geography> вы должны установить атрибут data; data-tooltip-id = "my-tooltip", при этом компонент реагирующей подсказки будет ссылаться на каждую географию/компонент:

import { ComposableMap, Geographies, Geography } from "react-simple-maps";

// ... 

<ComposableMap className='stroke-black'>
  <Geographies
    geography = {SgMap}
    fill='#D6D6DA'
    stroke='#FFFFFF'
  >
    {({ geographies }) =>
      geographies.map((geo) => (
        <Geography
          key = {geo.rsmKey}
          geography = {geo}
          data-tooltip-id = "my-tooltip"
          onMouseEnter = {() => setTooltipContent(geo.properties.name)}
          onMouseLeave = {() => setTooltipContent("")}
        />
      ))
    }
  </Geographies>
</ComposableMap>

Кроме того, в качестве бонуса, если вы просто отображаете простой контент (например, название субъекта/географической страны) во всплывающей подсказке для каждого <Geography>, тогда вам вообще может сойти с рук отсутствие необходимости поддерживать состояние локального компонента, опустив необходимость content = {content} и просто установив другой атрибут данных; data-tooltip-content на <Geography>, вот так:

import { ComposableMap, Geographies, Geography } from "react-simple-maps";

// ... 

<ComposableMap className='stroke-black'>
  <Geographies
    geography = {SgMap}
    fill='#D6D6DA'
    stroke='#FFFFFF'
  >
    {({ geographies }) =>
      geographies.map((geo) => (
        <Geography
          key = {geo.rsmKey}
          geography = {geo}
          data-tooltip-id = "my-tooltip"
          data-tooltip-content = {geo.properties.name}
        />
      ))
    }
  </Geographies>
</ComposableMap>

Исходная документация: https://react-tooltip.com/docs/getting-started#using-anchor-data-attributes

Другие вопросы по теме