From f633be4e8c1aac2c3bba2ebc89fc623fd0ba501f Mon Sep 17 00:00:00 2001
From: Gurinder Singh <gurinder@coderabbit.ai>
Date: Mon, 11 Nov 2024 16:03:52 -0500
Subject: [PATCH] fixed tooltip for pie chart (#192)

---
 .../src/components/Portal/Portal.tsx           |  2 +-
 public/app/plugins/panel/piechart/PieChart.tsx | 18 ++++++------------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx
index 93d5f8d7fa889..f4f88831e72e8 100644
--- a/packages/grafana-ui/src/components/Portal/Portal.tsx
+++ b/packages/grafana-ui/src/components/Portal/Portal.tsx
@@ -13,7 +13,7 @@ interface Props {
   forwardedRef?: React.ForwardedRef<HTMLDivElement>;
 }
 
-export function Portal(props: PropsWithChildren<Props>) {
+export const Portal: React.FC<PropsWithChildren<Props>> = (props) => {
   const { children, className, root, forwardedRef } = props;
   const theme = useTheme2();
   const node = useRef<HTMLDivElement | null>(null);
diff --git a/public/app/plugins/panel/piechart/PieChart.tsx b/public/app/plugins/panel/piechart/PieChart.tsx
index 3b980dd95434e..f79a8b95caed9 100644
--- a/public/app/plugins/panel/piechart/PieChart.tsx
+++ b/public/app/plugins/panel/piechart/PieChart.tsx
@@ -3,7 +3,7 @@ import { localPoint } from '@visx/event';
 import { RadialGradient } from '@visx/gradient';
 import { Group } from '@visx/group';
 import Pie, { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
-import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import { UseTooltipParams } from '@visx/tooltip/lib/hooks/useTooltip';
 import { useCallback } from 'react';
 import * as React from 'react';
@@ -60,10 +60,6 @@ export const PieChart = ({
   const componentInstanceId = useComponentInstanceId('PieChart');
   const styles = useStyles2(getStyles);
   const tooltip = useTooltip<SeriesTableRowProps[]>();
-  const { containerRef, TooltipInPortal } = useTooltipInPortal({
-    detectBounds: true,
-    scroll: true,
-  });
 
   const filteredFieldDisplayValues = fieldDisplayValues.filter(filterDisplayItems);
 
@@ -85,7 +81,7 @@ export const PieChart = ({
 
   return (
     <div className={styles.container}>
-      <svg width={layout.size} height={layout.size} ref={containerRef} style={{ overflow: 'visible' }}>
+      <svg width={layout.size} height={layout.size} style={{ overflow: 'visible' }}>
         <Group top={layout.position} left={layout.position}>
           {colors.map((color) => {
             return (
@@ -169,16 +165,14 @@ export const PieChart = ({
         </Group>
       </svg>
       {showTooltip ? (
-        <TooltipInPortal
+        <div
           key={Math.random()}
-          top={tooltip.tooltipTop}
+          style={{ position: 'absolute', top: layout.position,
+            left: layout.position, zIndex: 9999 }}
           className={styles.tooltipPortal}
-          left={tooltip.tooltipLeft}
-          unstyled={true}
-          applyPositionStyle={true}
         >
           <SeriesTable series={tooltip.tooltipData!} />
-        </TooltipInPortal>
+        </div>
       ) : null}
     </div>
   );