Geomap: Fix tooltip display (#54245) (#54397)

(cherry picked from commit 07dcb64e38)

Co-authored-by: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>

public/app/plugins/panel/geomap/GeomapPanel.tsx

@@ -369,8 +369,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],

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>
       )}
     </>
   );