From bb90d9beafbc309f127be7b6942fe43681e46fd7 Mon Sep 17 00:00:00 2001
From: Shyam Gupta <shyam@lawlytics.com>
Date: Wed, 13 Dec 2023 22:57:40 +0530
Subject: [PATCH] Attach tooltip to body

---
 src/components/DataMapState.tsx | 2 +-
 src/components/MapTooltip.tsx   | 7 ++++---
 src/index.tsx                   | 3 ++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/DataMapState.tsx b/src/components/DataMapState.tsx
index 7db38df..0189c43 100644
--- a/src/components/DataMapState.tsx
+++ b/src/components/DataMapState.tsx
@@ -1,4 +1,4 @@
-import { MouseEventHandler, createRef, useEffect, useState } from 'react'
+import { createRef, useEffect, useState } from 'react'
 
 import {
   DEFAULT_BORDER_COLOR,
diff --git a/src/components/MapTooltip.tsx b/src/components/MapTooltip.tsx
index 18a66ca..ab7c4bd 100644
--- a/src/components/MapTooltip.tsx
+++ b/src/components/MapTooltip.tsx
@@ -3,13 +3,14 @@ import { StateToolTip } from '../types'
 
 function MapTooltip(props: StateToolTip) {
   const HoverComponent = props.hoverComponent
+  const e = props.mouseEvent
 
   return createPortal(
     <>
       <div
         style={{
-          top: props.mouseEvent?.clientY - 150,
-          left: props.mouseEvent?.clientX - 100,
+          top: e.pageY - 75,
+          left: e.pageX,
           position: 'absolute',
         }}
         className="state-tooltip"
@@ -43,7 +44,7 @@ function MapTooltip(props: StateToolTip) {
           }
         `}</style>
     </>,
-    document.getElementById('datamaps-tooltip') as HTMLDivElement
+    document.querySelector('body') as HTMLBodyElement
   )
 }
 
diff --git a/src/index.tsx b/src/index.tsx
index a01dc4c..8f030ef 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,7 +11,7 @@ import MapTitle from './components/MapTitle'
 
 const svgStyle: SvgStyle = {
   display: 'inline-block',
-  position: 'absolute',
+  position: 'relative',
   top: 0,
   left: 0,
 }
@@ -64,6 +64,7 @@ function DataMapsIndia({
     <>
       <svg
         style={svgStyle}
+        className="datamaps-india"
         viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`}
         preserveAspectRatio="xMinYMin meet"
       >