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}