From b1555c95950f2f36a7cb9debd0af66b69c624504 Mon Sep 17 00:00:00 2001
From: Sol <94075844+sjd210@users.noreply.github.com>
Date: Wed, 19 Jul 2023 09:49:21 +0100
Subject: [PATCH] Tooltip: Set tooltip of active panel to front of zIndex
 (#70747)

* Set active graph tooltip to front

* added zIndexOffset to Props

* Use className in TooltipPlugin

Co-authored-by: sjd210 <solomon.dubock@grafana.com>

* Change to UseStyles2 pattern

---------

Co-authored-by: Victor Marin <victor.marin@grafana.com>
Co-authored-by: sjd210 <solomon.dubock@grafana.com>
---
 .../src/components/uPlot/plugins/TooltipPlugin.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index 76e4da995eb..a9ee42efb33 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useMountedState } from 'react-use';
 import uPlot from 'uplot';
@@ -12,11 +13,12 @@ import {
   formattedValueToString,
   getDisplayProcessor,
   getFieldDisplayName,
+  GrafanaTheme2,
   TimeZone,
 } from '@grafana/data';
 import { TooltipDisplayMode, SortOrder } from '@grafana/schema';
 
-import { useTheme2 } from '../../../themes/ThemeContext';
+import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
 import { Portal } from '../../Portal/Portal';
 import { SeriesTable, SeriesTableRowProps, VizTooltipContainer } from '../../VizTooltip';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
@@ -272,8 +274,10 @@ export const TooltipPlugin = ({
     tooltip = renderTooltip(otherProps.data, focusedSeriesIdx, focusedPointIdx);
   }
 
+  const style = useStyles2(getStyles);
+
   return (
-    <Portal>
+    <Portal className={isActive ? style.tooltipWrapper : undefined}>
       {tooltip && coords && (
         <VizTooltipContainer position={{ x: coords.x, y: coords.y }} offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}>
           {tooltip}
@@ -321,3 +325,9 @@ export function positionTooltip(u: uPlot, bbox: DOMRect) {
 
   return { x, y };
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  tooltipWrapper: css`
+    z-index: ${theme.zIndex.portal + 1} !important;
+  `,
+});