diff --git a/packages/visx-xychart/src/components/Tooltip.tsx b/packages/visx-xychart/src/components/Tooltip.tsx index 7aa0e1e01a..d80adab2bd 100644 --- a/packages/visx-xychart/src/components/Tooltip.tsx +++ b/packages/visx-xychart/src/components/Tooltip.tsx @@ -55,7 +55,7 @@ export type TooltipProps = { */ resizeObserverPolyfill?: UseTooltipPortalOptions['polyfill']; } & Omit & - Pick; + Pick; const INVISIBLE_STYLES: React.CSSProperties = { position: 'absolute', @@ -122,6 +122,7 @@ function TooltipInner({ snapTooltipToDatumX = false, snapTooltipToDatumY = false, verticalCrosshairStyle, + zIndex, ...tooltipProps }: TooltipProps) { const { colorScale, theme, innerHeight, innerWidth, margin, xScale, yScale, dataRegistry } = @@ -132,6 +133,7 @@ function TooltipInner({ detectBounds, polyfill: resizeObserverPolyfill, scroll, + zIndex, }); // To correctly position itself in a Portal, the tooltip must know its container bounds diff --git a/packages/visx-xychart/test/components/Tooltip.test.tsx b/packages/visx-xychart/test/components/Tooltip.test.tsx index 3a32d222bf..c0423485cf 100644 --- a/packages/visx-xychart/test/components/Tooltip.test.tsx +++ b/packages/visx-xychart/test/components/Tooltip.test.tsx @@ -181,4 +181,13 @@ describe('', () => { }); expect(container?.parentNode?.querySelectorAll('div.visx-tooltip-glyph')).toHaveLength(2); }); + + it("should pass zIndex prop to Portal", () => { + const { container } = setup({ + props: { zIndex: 123 }, + context: { tooltipOpen: true }, + }); + const zIndex = container?.parentNode?.querySelector('div.visx-tooltip')?.parentElement?.style.zIndex; + expect(zIndex).toBe("123"); + }); });