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 (alternative solution) (#86716)

Browse Source 
fix: ensure new viz tooltips are visible within modals

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Darren Janeczek 2024-04-25 16:27:24 -04:00 committed by GitHub
parent dff7cb9afb
commit ff761bb7d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 8 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,7 +9,6 @@ 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,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',