fix tooltip position

parlemonde · Jun 4, 2024 · 2350807 · 2350807
1 parent dab6b22
commit 2350807
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git 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 (
     <div
-      className="mouse-tracker"
       style={{
         position: 'absolute',
-        padding: '2rem',
+        top: 0,
+        left: 0,
+        padding: '1rem 2rem',
+        display: isVisible ? 'block' : 'none',
         background: 'white',
+        boxShadow: 'rgba(149, 157, 165, 0.2) 0px 8px 24px',
         transform: `translate(${position.x}px, ${position.y}px)`,
-        pointerEvents: 'none', // This ensures the div does not interfere with mouse events
+        pointerEvents: 'none',
       }}
     >
       {children}

diff --git 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) => (
                 <Geography
-                  onMouseEnter={(e) => {
-                    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 = () => {
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      {isTooltipVisible && <TooltipMouseTracker>{tooltipData}</TooltipMouseTracker>}
+      <TooltipMouseTracker isVisible={isTooltipVisible}>{tooltipData}</TooltipMouseTracker>
       <div className={styles.legendContainer}>
         <h2>Légende:</h2>
         <ul>