Attach tooltip to body

sshyam-gupta · Dec 13, 2023 · bb90d9b · bb90d9b
1 parent bc79735
commit bb90d9b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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"
       >