From 06f948e0cdbcf786c5c79903a0be8fc8892ef7c3 Mon Sep 17 00:00:00 2001
From: nofurtherinformation <dhalpern@uchicago.edu>
Date: Tue, 6 Feb 2024 20:12:42 -0600
Subject: [PATCH] tooltip fix

---
 components/Map/Map.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
index a4ebf9b..a1b00bd 100644
--- a/components/Map/Map.tsx
+++ b/components/Map/Map.tsx
@@ -42,14 +42,24 @@ const Tooltip: React.FC<{ dataService: DataService }> = ({ dataService }) => {
   }
   const { x, y, id } = tooltip
   const datasets = Object.keys(dataService.data)
-  const data = datasets.map((d) => dataService.data[d]?.[id]).filter(Boolean)
+  const data = datasets.map((d) => dataService.data[d]?.[+id]).filter(Boolean)
 
   return (
-    <div style={{ background: "white", position: "fixed", left: x, top: y, padding: "1rem", zIndex: 1001 }}>
+    <div
+      style={{
+        background: "white",
+        position: "fixed",
+        left: x + 10,
+        top: y + 10,
+        pointerEvents: "none",
+        padding: "1rem",
+        zIndex: 1001,
+      }}
+    >
       {data.map((d) =>
         Object.entries(d!).map(([k, v], i) => {
           return (
-            <p key={i}>
+            <p key={i} style={{ lineHeight: 1, fontSize: 12 }}>
               {k}: {v}
             </p>
           )
@@ -102,10 +112,10 @@ export const Map = () => {
         getFillColor: [isReady, currentColumnSpec?.column],
       },
       onHover: (info: any) => {
-        if (info?.x !== -1 && info?.y !== -1) {
+        if (info?.x && info?.y) {
           dispatch(setTooltipInfo({ x: info.x, y: info.y, id: info.object?.properties?.GEOID }))
         } else {
-          // dispatch(setTooltipInfo(null))
+          dispatch(setTooltipInfo(null))
         }
       },
       lineWidthMinPixels: 1,