From 07dcb64e383d5fc8d52ec039358bf2413cc2762f Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Mon, 29 Aug 2022 09:29:54 -0500
Subject: [PATCH] Geomap: Fix tooltip display (#54245)

---
 public/app/plugins/panel/geomap/GeomapPanel.tsx   |  4 ++--
 public/app/plugins/panel/geomap/GeomapTooltip.tsx | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx
index 632748ebc7b..e9980ae084d 100644
--- a/public/app/plugins/panel/geomap/GeomapPanel.tsx
+++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx
@@ -371,8 +371,8 @@ export class GeomapPanel extends Component<Props, State> {
     const hover = toLonLat(this.map.getCoordinateFromPixel(pixel));
 
     const { hoverPayload } = this;
-    hoverPayload.pageX = mouse.offsetX;
-    hoverPayload.pageY = mouse.offsetY;
+    hoverPayload.pageX = mouse.pageX;
+    hoverPayload.pageY = mouse.pageY;
     hoverPayload.point = {
       lat: hover[1],
       lon: hover[0],
diff --git a/public/app/plugins/panel/geomap/GeomapTooltip.tsx b/public/app/plugins/panel/geomap/GeomapTooltip.tsx
index 90b1c2c5b80..4393fd970c2 100644
--- a/public/app/plugins/panel/geomap/GeomapTooltip.tsx
+++ b/public/app/plugins/panel/geomap/GeomapTooltip.tsx
@@ -2,7 +2,7 @@ import { useDialog } from '@react-aria/dialog';
 import { useOverlay } from '@react-aria/overlays';
 import React, { createRef } from 'react';
 
-import { VizTooltipContainer } from '@grafana/ui';
+import { Portal, VizTooltipContainer } from '@grafana/ui';
 
 import { ComplexDataHoverView } from './components/ComplexDataHoverView';
 import { GeomapHoverPayload } from './event';
@@ -21,11 +21,13 @@ export const GeomapTooltip = ({ ttip, onClose, isOpen }: Props) => {
   return (
     <>
       {ttip && ttip.layers && (
-        <VizTooltipContainer position={{ x: ttip.pageX, y: ttip.pageY }} offset={{ x: 10, y: 10 }} allowPointerEvents>
-          <section ref={ref} {...overlayProps} {...dialogProps}>
-            <ComplexDataHoverView layers={ttip.layers} isOpen={isOpen} onClose={onClose} />
-          </section>
-        </VizTooltipContainer>
+        <Portal>
+          <VizTooltipContainer position={{ x: ttip.pageX, y: ttip.pageY }} offset={{ x: 10, y: 10 }} allowPointerEvents>
+            <section ref={ref} {...overlayProps} {...dialogProps}>
+              <ComplexDataHoverView layers={ttip.layers} isOpen={isOpen} onClose={onClose} />
+            </section>
+          </VizTooltipContainer>
+        </Portal>
       )}
     </>
   );