Я использую 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;
Любая помощь приветствуется. Версия для песочницы работает; кстати, у меня почему-то нет.
Если вы используете 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
Посмотрите эту обновленную версию песочницы, которую вы предоставили, в качестве альтернативы использованию всплывающей подсказки с
data-tooltip-id
иdata-tooltip-content
, которая, по моему мнению, лучше подходит для вашего варианта использования. Посмотрите, работает ли это локально для вас. Если это не так, это связано с настройкой вашего проекта. Пожалуйста, откройте выпуск на GitHub с дополнительной информацией о настройке вашего проекта и, возможно, даже с примером репозитория, чтобы мы могли его воспроизвести.