From ff761bb7d6a61979b32f3b0c8ec9858529c9f244 Mon Sep 17 00:00:00 2001
From: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com>
Date: Thu, 25 Apr 2024 16:27:24 -0400
Subject: [PATCH] Tooltips: Ensure new viz tooltips are visible within modals
 (alternative solution) (#86716)

fix: ensure new viz tooltips are visible within modals

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
---
 packages/grafana-data/src/themes/zIndex.ts            |  1 -
 .../src/components/uPlot/plugins/TooltipPlugin2.tsx   | 11 ++++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-data/src/themes/zIndex.ts b/packages/grafana-data/src/themes/zIndex.ts
index 093c0ef93d4..1423bbaf664 100644
--- a/packages/grafana-data/src/themes/zIndex.ts
+++ b/packages/grafana-data/src/themes/zIndex.ts
@@ -9,7 +9,6 @@ export const zIndex = {
   tooltip: 1040,
   modalBackdrop: 1050,
   modal: 1060,
-  tooltipWithinModal: 1060,
   portal: 1061,
 };
 
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
index df90a10bc44..daa3f42a12d 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
@@ -1,12 +1,11 @@
 import { css, cx } from '@emotion/css';
-import React, { useLayoutEffect, useRef, useReducer, CSSProperties, useContext } from 'react';
+import React, { useLayoutEffect, useRef, useReducer, CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import uPlot from 'uplot';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { DashboardCursorSync } from '@grafana/schema';
 
-import { ModalsContext } from '../../../components/Modal/ModalsContext';
 import { useStyles2 } from '../../../themes';
 import { getPortalContainer } from '../../Portal/Portal';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
@@ -123,10 +122,8 @@ export const TooltipPlugin2 = ({
 
   const sizeRef = useRef<TooltipContainerSize>();
 
-  const isWithinModal = useContext(ModalsContext).component !== null;
-
   maxWidth = isPinned ? DEFAULT_TOOLTIP_WIDTH : maxWidth ?? DEFAULT_TOOLTIP_WIDTH;
-  const styles = useStyles2(getStyles, maxWidth, isWithinModal);
+  const styles = useStyles2(getStyles, maxWidth);
 
   const renderRef = useRef(render);
   renderRef.current = render;
@@ -583,11 +580,11 @@ export const TooltipPlugin2 = ({
   return null;
 };
 
-const getStyles = (theme: GrafanaTheme2, maxWidth?: number, isWithinModal?: boolean) => ({
+const getStyles = (theme: GrafanaTheme2, maxWidth?: number) => ({
   tooltipWrapper: css({
     top: 0,
     left: 0,
-    zIndex: !isWithinModal ? theme.zIndex.tooltip : theme.zIndex.tooltipWithinModal,
+    zIndex: theme.zIndex.portal,
     whiteSpace: 'pre',
     borderRadius: theme.shape.radius.default,
     position: 'fixed',