IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tooltips: Ensure new viz tooltips are visible within modals (#86258)

Browse Source 
fix: ensure new viz tooltips are visible within modals
This commit is contained in:
Darren Janeczek 2024-04-17 13:54:10 -04:00 committed by GitHub
parent 46efe41e33
commit 53d2714a18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/themes/zIndex.ts
View File

@ -9,6 +9,7 @@ export const zIndex = {
tooltip: 1040,
modalBackdrop: 1050,
modal: 1060,
tooltipWithinModal: 1060,
portal: 1061,
};

11
packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
View File

@ -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',