diff --git a/src/components/TooltipMouseTracker/TooltipMouseTracker.tsx b/src/components/TooltipMouseTracker/TooltipMouseTracker.tsx index 4c7d1cfbc..64d780580 100644 --- a/src/components/TooltipMouseTracker/TooltipMouseTracker.tsx +++ b/src/components/TooltipMouseTracker/TooltipMouseTracker.tsx @@ -3,9 +3,10 @@ import React, { useState, useEffect } from 'react'; interface MouseTrackerProps { children: React.ReactNode; offset?: { x: number; y: number }; + isVisible: boolean; } -const MouseTracker = ({ children, offset = { x: -750, y: -250 } }: MouseTrackerProps) => { +const MouseTracker = ({ children, offset = { x: 0, y: 0 }, isVisible }: MouseTrackerProps) => { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { @@ -24,13 +25,16 @@ const MouseTracker = ({ children, offset = { x: -750, y: -250 } }: MouseTrackerP return (
{children} diff --git a/src/components/admin/dashboard-statistics/dashboardStatisticsMap/DashboardStatsMap.tsx b/src/components/admin/dashboard-statistics/dashboardStatisticsMap/DashboardStatsMap.tsx index b039f2691..a78991779 100644 --- a/src/components/admin/dashboard-statistics/dashboardStatisticsMap/DashboardStatsMap.tsx +++ b/src/components/admin/dashboard-statistics/dashboardStatisticsMap/DashboardStatsMap.tsx @@ -7,7 +7,6 @@ import styles from './DashboardStatsMap.module.css'; import TooltipMouseTracker from 'src/components/TooltipMouseTracker/TooltipMouseTracker'; const DashboardStatsMap = () => { - const [tooltipPosition, setTooltipPosition] = React.useState({ x: 0, y: 0 }); const [isTooltipVisible, setIsTooltipVisible] = React.useState(false); const [tooltipData, setTooltipData] = React.useState(''); @@ -19,10 +18,9 @@ const DashboardStatsMap = () => { {({ geographies }) => geographies.map((geo) => ( { - setTooltipPosition({ x: e.clientX, y: e.clientY }); - setIsTooltipVisible(true); + onMouseOver={() => { setTooltipData(geo.rsmKey); + setIsTooltipVisible(true); }} onMouseLeave={() => setIsTooltipVisible(false)} key={geo.rsmKey} @@ -38,14 +36,14 @@ const DashboardStatsMap = () => { hover: { fill: '#edf2fb', stroke: '#000', - strokeWidth: '.25', + strokeWidth: '.2', outline: 'none', cursor: 'pointer', }, pressed: { fill: 'white', stroke: '#000', - strokeWidth: '.25', + strokeWidth: '.2', outline: 'none', }, }} @@ -55,7 +53,7 @@ const DashboardStatsMap = () => { - {isTooltipVisible && {tooltipData}} + {tooltipData}

Légende: