diff --git a/packages/grafana-data/src/themes/zIndex.ts b/packages/grafana-data/src/themes/zIndex.ts
index 1423bbaf664..093c0ef93d4 100644
--- a/packages/grafana-data/src/themes/zIndex.ts
+++ b/packages/grafana-data/src/themes/zIndex.ts
@@ -9,6 +9,7 @@ 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 46861900ff0..df90a10bc44 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
@@ -1,11 +1,12 @@
 import { css, cx } from '@emotion/css';
-import React, { useLayoutEffect, useRef, useReducer, CSSProperties } from 'react';
+import React, { useLayoutEffect, useRef, useReducer, CSSProperties, useContext } 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';
@@ -122,8 +123,10 @@ 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);
+  const styles = useStyles2(getStyles, maxWidth, isWithinModal);
 
   const renderRef = useRef(render);
   renderRef.current = render;
@@ -580,11 +583,11 @@ export const TooltipPlugin2 = ({
   return null;
 };
 
-const getStyles = (theme: GrafanaTheme2, maxWidth?: number) => ({
+const getStyles = (theme: GrafanaTheme2, maxWidth?: number, isWithinModal?: boolean) => ({
   tooltipWrapper: css({
     top: 0,
     left: 0,
-    zIndex: theme.zIndex.tooltip,
+    zIndex: !isWithinModal ? theme.zIndex.tooltip : theme.zIndex.tooltipWithinModal,
     whiteSpace: 'pre',
     borderRadius: theme.shape.radius.default,
     position: 'fixed',