@automattic/charts 4.0.0 → 4.1.1

package/src/components/tooltip/private/bounded-tooltip.tsx

@@ -1,5 +1,6 @@
 import { Tooltip, defaultStyles } from '@visx/tooltip';
 import { useLayoutEffect, useRef, useState } from 'react';
+import type { TooltipPlacement } from '../../../visx/types';
 import type { TooltipProps } from '@visx/tooltip';
 
 type Bounds = { left: number; top: number; right: number; bottom: number };
@@ -9,9 +10,14 @@ export type BoundedTooltipProps = Omit< TooltipProps, 'left' | 'top' | 'applyPos
 	/** Anchor, in the coordinates of the positioned wrapper the box renders into. */
 	left?: number;
 	top?: number;
+	placement?: TooltipPlacement;
 };
 
 const DEFAULT_OFFSET = 10;
+const POINTER_HEIGHT = 6;
+
+const clamp = ( position: number, min: number, max: number, size: number ) =>
+	Math.min( Math.max( position, min ), Math.max( min, max - size ) );
 
 const isClipping = ( element: Element ) => {
 	const { overflow, overflowX, overflowY } = getComputedStyle( element );
@@ -33,19 +39,25 @@ const findClippingAncestor = ( wrapper: Element ): Element | null => {
 };
 
 /**
- * Where the box goes, in wrapper coordinates. Below and to the right of the
- * anchor; flipped to the other side when that side clips less, as visx's
- * `TooltipWithBounds` decides it; then clamped so the box stays inside
- * `bounds` whenever it fits at all.
+ * Where the box goes, in wrapper coordinates. Automatic placement flips to
+ * the side that clips less, then clamps inside `bounds`; below-axis placement
+ * is centered on the anchor and clamped horizontally.
+ *
+ * The flip measures against the visible part of the wrapper, its intersection
+ * with `bounds`. Only the clamp is bound by the page: a box that fits inside the
+ * chart on one side stays there, so it does not reach past the chart into
+ * siblings that paint over it.
  *
- * @param params            - Anchor, offsets, the box size and the bounds to keep inside.
+ * @param params            - Anchor, offsets, the box size and the rects to keep inside.
  * @param params.left       - Anchor x, in wrapper coordinates.
  * @param params.top        - Anchor y, in wrapper coordinates.
  * @param params.offsetLeft - Gap between the anchor and the box, horizontally.
  * @param params.offsetTop  - Gap between the anchor and the box, vertically.
  * @param params.box        - Rendered size of the box.
+ * @param params.wrapper    - The wrapper's own edges, in wrapper coordinates.
+ * @param params.placement  - Fixed below-axis placement or automatic flipping.
  * @param params.bounds     - Edges the box must keep inside, in wrapper coordinates.
- * @return The box's top-left corner, rounded to whole pixels.
+ * @return The box's top-left corner; fixed placement preserves the axis's subpixel y.
  */
 export const getBoundedPosition = ( {
 	left,
@@ -53,31 +65,53 @@ export const getBoundedPosition = ( {
 	offsetLeft,
 	offsetTop,
 	box,
+	wrapper,
 	bounds,
+	placement = 'auto',
 }: {
 	left: number;
 	top: number;
 	offsetLeft: number;
 	offsetTop: number;
 	box: Size;
+	wrapper: Bounds;
 	bounds: Bounds;
+	placement?: BoundedTooltipProps[ 'placement' ];
 } ) => {
+	if ( placement === 'below-axis' ) {
+		return {
+			x: Math.round( clamp( left - box.width / 2, bounds.left, bounds.right, box.width ) ),
+			y: top + POINTER_HEIGHT,
+		};
+	}
+
+	// The part of the wrapper that is not cut off: the flip keeps the box inside it.
+	const fit = {
+		left: Math.max( wrapper.left, bounds.left ),
+		top: Math.max( wrapper.top, bounds.top ),
+		right: Math.min( wrapper.right, bounds.right ),
+		bottom: Math.min( wrapper.bottom, bounds.bottom ),
+	};
+
 	const rightX = left + offsetLeft;
 	const leftX = left - offsetLeft - box.width;
-	const rightOverflow = rightX + box.width - bounds.right;
-	const leftOverflow = bounds.left - leftX;
+	const rightOverflow = rightX + box.width - fit.right;
+	const leftOverflow = fit.left - leftX;
 	let x = rightOverflow > 0 && rightOverflow > leftOverflow ? leftX : rightX;
 
 	const downY = top + offsetTop;
 	const upY = top - offsetTop - box.height;
-	const downOverflow = downY + box.height - bounds.bottom;
-	const upOverflow = bounds.top - upY;
+	const downOverflow = downY + box.height - fit.bottom;
+	const upOverflow = fit.top - upY;
 	let y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
 
-	x = Math.min( Math.max( x, bounds.left ), Math.max( bounds.left, bounds.right - box.width ) );
-	y = Math.min( Math.max( y, bounds.top ), Math.max( bounds.top, bounds.bottom - box.height ) );
+	x = clamp( x, bounds.left, bounds.right, box.width );
+	y = clamp( y, bounds.top, bounds.bottom, box.height );
 
-	return { x: Math.round( x ), y: Math.round( y ) };
+	return {
+		x: Math.round( x ),
+		y: Math.round( y ),
+	};
 };
 
 /**
@@ -88,7 +122,8 @@ export const getBoundedPosition = ( {
  * alone would let the box spill into an `overflow: hidden` card and be cut off.
  *
  * Re-measures on every render, so a box whose content changes width between
- * two hovers is placed for its current size.
+ * two hovers is placed for its current size. See `getBoundedPosition` for the
+ * below-axis exception.
  *
  * @param props            - visx `Tooltip` props.
  * @param props.left       - Anchor x, in wrapper coordinates.
@@ -98,6 +133,7 @@ export const getBoundedPosition = ( {
  * @param props.style      - Box styles; visx's defaults unless `unstyled`.
  * @param props.unstyled   - Skip `style` and leave the box bare.
  * @param props.children   - Box content.
+ * @param props.placement  - Fixed below-axis placement or automatic flipping.
  * @return The tooltip box.
  */
 export const BoundedTooltip = ( {
@@ -108,6 +144,7 @@ export const BoundedTooltip = ( {
 	style = defaultStyles,
 	unstyled = false,
 	children,
+	placement = 'auto',
 	...rest
 }: BoundedTooltipProps ) => {
 	const nodeRef = useRef< HTMLDivElement >( null );
@@ -136,7 +173,9 @@ export const BoundedTooltip = ( {
 			top,
 			offsetLeft,
 			offsetTop,
+			placement,
 			box: { width: own.width, height: own.height },
+			wrapper: { left: 0, top: 0, right: wrapperRect.width, bottom: wrapperRect.height },
 			bounds: {
 				left: clipRect.left - wrapperRect.left,
 				top: clipRect.top - wrapperRect.top,
@@ -148,10 +187,10 @@ export const BoundedTooltip = ( {
 			current && current.x === next.x && current.y === next.y ? current : next
 		);
 		// `children` re-runs the measurement when the content, and so the box size, changes.
-	}, [ left, top, offsetLeft, offsetTop, children ] );
+	}, [ left, top, offsetLeft, offsetTop, children, placement ] );
 
 	const x = position?.x ?? left + offsetLeft;
-	const y = position?.y ?? top + offsetTop;
+	const y = position?.y ?? top + ( placement === 'below-axis' ? POINTER_HEIGHT : offsetTop );
 
 	return (
 		<Tooltip
@@ -166,6 +205,22 @@ export const BoundedTooltip = ( {
 			} }
 			{ ...rest }
 		>
+			{ placement === 'below-axis' && (
+				<span
+					aria-hidden="true"
+					data-testid="tooltip-axis-pointer"
+					style={ {
+						position: 'absolute',
+						left: left - x - POINTER_HEIGHT,
+						top: -POINTER_HEIGHT,
+						width: POINTER_HEIGHT * 2,
+						height: POINTER_HEIGHT,
+						background: 'inherit',
+						clipPath: 'polygon(50% 0, 100% 100%, 0 100%)',
+						pointerEvents: 'none',
+					} }
+				/>
+			) }
 			{ children }
 		</Tooltip>
 	);

package/src/components/tooltip/test/accessible-tooltip.test.tsx

@@ -6,7 +6,7 @@ import { ChartScopeContext } from '../../../providers/chart-scope';
 import type { ReactNode } from 'react';
 
 // A real chart is the harness rather than the subject: the crosshairs render only once visx has a data context and an open tooltip. The unresponsive export is what lets the test own the scope element — `withResponsive` otherwise provides its own wrapper as the scope.
-const renderChart = ( scope?: HTMLElement ) => {
+const renderChart = ( scope?: HTMLElement, tooltipPlacement?: 'auto' | 'below-axis' ) => {
 	const chart = (
 		<LineChartUnresponsive
 			width={ 500 }
@@ -22,6 +22,7 @@ const renderChart = ( scope?: HTMLElement ) => {
 				},
 			] }
 			withTooltips
+			tooltipPlacement={ tooltipPlacement }
 			withTooltipCrosshairs={ { showVertical: true } }
 			withGradientFill={ false }
 		/>
@@ -59,6 +60,64 @@ describe( 'AccessibleTooltip', () => {
 		document.body.removeChild( scope );
 	} );
 
+	it( 'keeps the existing focus scrolling for automatic tooltips', async () => {
+		const focus = jest.spyOn( HTMLElement.prototype, 'focus' );
+		try {
+			renderChart();
+			await openTooltip();
+
+			expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
+			expect( focus ).toHaveBeenLastCalledWith();
+		} finally {
+			focus.mockRestore();
+		}
+	} );
+
+	it( 'focuses below-axis keyboard tooltips without scrolling their ancestors', async () => {
+		const focus = jest.spyOn( HTMLElement.prototype, 'focus' );
+		try {
+			renderChart( undefined, 'below-axis' );
+			await openTooltip();
+
+			expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
+			expect( focus ).toHaveBeenCalledWith( { preventScroll: true } );
+		} finally {
+			focus.mockRestore();
+		}
+	} );
+
+	it.each( [
+		[ 'Tab', '{Tab}' ],
+		[ 'Escape', '{Escape}' ],
+	] )( 'requests scroll suppression when returning focus after %s', async ( _name, keys ) => {
+		const user = userEvent.setup();
+		renderChart( undefined, 'below-axis' );
+		await openTooltip();
+		const focus = jest.spyOn( screen.getByRole( 'grid' ), 'focus' );
+		try {
+			await user.keyboard( keys );
+			expect( focus ).toHaveBeenCalledWith( { preventScroll: true } );
+		} finally {
+			focus.mockRestore();
+		}
+	} );
+
+	it.each( [
+		[ 'Tab', '{Tab}' ],
+		[ 'Escape', '{Escape}' ],
+	] )( 'keeps default focus scrolling when returning focus after %s', async ( _name, keys ) => {
+		const user = userEvent.setup();
+		renderChart();
+		await openTooltip();
+		const focus = jest.spyOn( screen.getByRole( 'grid' ), 'focus' );
+		try {
+			await user.keyboard( keys );
+			expect( focus ).toHaveBeenCalledWith();
+		} finally {
+			focus.mockRestore();
+		}
+	} );
+
 	it( 'falls back to the catalog default when the role is unset', async () => {
 		renderChart();
 

package/src/components/tooltip/test/bounded-tooltip.test.tsx

@@ -12,6 +12,7 @@ describe( 'getBoundedPosition', () => {
 				top: 20,
 				...OFFSETS,
 				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 300 },
 				bounds: { left: 0, top: 0, right: 600, bottom: 300 },
 			} )
 		).toEqual( { x: 50, y: 30 } );
@@ -24,6 +25,7 @@ describe( 'getBoundedPosition', () => {
 				top: 280,
 				...OFFSETS,
 				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 300 },
 				bounds: { left: 0, top: 0, right: 600, bottom: 300 },
 			} )
 		).toEqual( { x: 282, y: 234 } );
@@ -38,23 +40,54 @@ describe( 'getBoundedPosition', () => {
 				top: 50,
 				...OFFSETS,
 				box: BOX,
+				wrapper: { left: 0, top: 0, right: 346, bottom: 200 },
 				bounds: { left: 0, top: 0, right: 346, bottom: 200 },
 			} )
 		).toEqual( { x: 138, y: 60 } );
 	} );
 
 	test( 'may leave the wrapper as long as it stays inside the clipping ancestor', () => {
-		// The wrapper starts 40px inside its clipping card, so the box can reach
-		// 40px past the wrapper's left edge, and stops there.
+		// Neither side fits the 346px wrapper, and the clipping card ends 14px
+		// past its right edge, so the box keeps the near side and stops there.
 		expect(
 			getBoundedPosition( {
 				left: 173,
 				top: 50,
 				...OFFSETS,
 				box: BOX,
+				wrapper: { left: 0, top: 0, right: 346, bottom: 200 },
 				bounds: { left: -40, top: -60, right: 360, bottom: 200 },
 			} )
-		).toEqual( { x: -40, y: 60 } );
+		).toEqual( { x: 152, y: 60 } );
+	} );
+
+	test( 'flips up to stay inside the wrapper even when the page below has room', () => {
+		// The box fits above the anchor inside the 200px wrapper, so it goes
+		// there rather than below the chart, where the page would cover it.
+		expect(
+			getBoundedPosition( {
+				left: 40,
+				top: 180,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 200 },
+				bounds: { left: 0, top: 0, right: 1024, bottom: 768 },
+			} )
+		).toEqual( { x: 50, y: 134 } );
+	} );
+
+	test( 'flips up when the wrapper fits below but the clipping ancestor does not', () => {
+		// A scrolled container cuts the wrapper off 20px under the anchor.
+		expect(
+			getBoundedPosition( {
+				left: 40,
+				top: 100,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 300 },
+				bounds: { left: 0, top: -50, right: 600, bottom: 120 },
+			} )
+		).toEqual( { x: 50, y: 54 } );
 	} );
 } );
 
@@ -100,11 +133,74 @@ describe( 'BoundedTooltip', () => {
 			</div>
 		);
 
-		// Neither side of the anchor fits inside the card, so the box stops at
-		// the card's left edge, 40px outside the wrapper.
-		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(-40px, 60px)' } );
+		// Neither side of the anchor fits the wrapper, so the box keeps the near
+		// side and stops at the card's right edge, 14px outside the wrapper.
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(152px, 60px)' } );
 	} );
 
+	test( 'keeps the box inside the wrapper when nothing clips and the anchor sits low', () => {
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			return this.classList.contains( 'visx-tooltip' )
+				? rect( 0, 0, 150, 100 )
+				: rect( 100, 100, 600, 200 );
+		} );
+
+		render(
+			<div style={ { position: 'relative' } }>
+				<BoundedTooltip left={ 300 } top={ 180 } data-testid="box">
+					content
+				</BoundedTooltip>
+			</div>
+		);
+
+		// The viewport has room below the wrapper, but that is where the page's
+		// own content paints over the box; above the anchor it fits in the chart.
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(310px, 70px)' } );
+	} );
+
+	test.each( [
+		{ anchor: 20, x: 0, pointerLeft: 14 },
+		{ anchor: 150, x: 46, pointerLeft: 98 },
+		{ anchor: 280, x: 92, pointerLeft: 182 },
+	] )(
+		'keeps the below-axis pointer at x=$anchor after clamping',
+		( { anchor, x, pointerLeft } ) => {
+			jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+				this: Element
+			) {
+				return this.classList.contains( 'visx-tooltip' )
+					? rect( 0, 0, 208, 36 )
+					: rect( 0, 0, 300, 100 );
+			} );
+
+			render(
+				<div style={ { overflow: 'hidden' } }>
+					<div style={ { position: 'relative' } }>
+						<BoundedTooltip placement="below-axis" left={ anchor } top={ 100 } data-testid="box">
+							content
+						</BoundedTooltip>
+					</div>
+				</div>
+			);
+
+			expect( screen.getByTestId( 'box' ) ).toHaveStyle( {
+				transform: `translate(${ x }px, 106px)`,
+			} );
+			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveStyle( {
+				left: `${ pointerLeft }px`,
+				top: '-6px',
+				width: '12px',
+				height: '6px',
+			} );
+			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveAttribute(
+				'aria-hidden',
+				'true'
+			);
+		}
+	);
+
 	test( 'falls back to the viewport when nothing clips', () => {
 		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
 			this: Element

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { BarSeries, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
+import { BarSeries, buildChartTheme, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
 import { useContext, useEffect } from 'react';
 import { XyChartTooltip } from '../xy-chart-tooltip';
 import type { XyChartTooltipProps } from '../../../visx/types';
-import type { EventHandlerParams } from '@visx/xychart';
+import type { EventHandlerParams, XYChartTheme } from '@visx/xychart';
 
 type Datum = { x: number; y: number };
 
@@ -76,7 +76,8 @@ const renderChart = (
 	params: EventHandlerParams< Datum >[] = [
 		{ key: 'A', index: 1, datum: SERIES_A[ 1 ], svgPoint: { x: 123, y: 45 } },
 	],
-	margin = NO_MARGIN
+	margin = NO_MARGIN,
+	theme?: XYChartTheme
 ) =>
 	render(
 		<div data-testid="wrapper" style={ { position: 'relative' } }>
@@ -84,6 +85,7 @@ const renderChart = (
 				width={ 200 }
 				height={ 100 }
 				margin={ margin }
+				theme={ theme }
 				xScale={ { type: 'linear', domain: [ 0, 10 ] } }
 				yScale={ { type: 'linear', domain: [ 0, 100 ] } }
 			>
@@ -100,6 +102,23 @@ const renderChart = (
 	);
 
 describe( 'XyChartTooltip', () => {
+	test.each( [
+		[ 'CanvasText', '0 1px 2px #22222255' ],
+		[ '#123456', '0 1px 2px #12345655' ],
+	] )( 'renders a valid shadow for htmlLabel color %s', async ( color, boxShadow ) => {
+		const theme = buildChartTheme( {
+			backgroundColor: '#ffffff',
+			colors: [ '#123456' ],
+			tickLength: 4,
+			gridColor: '#dddddd',
+			gridColorDark: '#222222',
+			htmlLabel: { color },
+		} );
+		renderChart( {}, undefined, undefined, theme );
+
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { boxShadow } );
+	} );
+
 	test( 'renders the tooltip box inside the chart wrapper, not in a body-level portal', async () => {
 		const { container } = renderChart();
 
@@ -131,6 +150,54 @@ describe( 'XyChartTooltip', () => {
 		);
 	} );
 
+	test( 'anchors below the x-axis label band without moving datum glyphs or crosshairs', async () => {
+		const originalRect = Element.prototype.getBoundingClientRect;
+		const rectSpy = jest
+			.spyOn( Element.prototype, 'getBoundingClientRect' )
+			.mockImplementation( function ( this: Element ) {
+				const rect = originalRect.call( this );
+				return this.classList.contains( 'visx-tooltip' )
+					? { ...rect, width: 80, height: 30, right: rect.left + 80, bottom: rect.top + 30 }
+					: rect;
+			} );
+
+		try {
+			renderChart(
+				{
+					tooltipPlacement: 'below-axis',
+					snapTooltipToDatumY: true,
+					showDatumGlyph: true,
+					showVerticalCrosshair: true,
+					showHorizontalCrosshair: true,
+				},
+				undefined,
+				{ top: 10, right: 20, bottom: 30, left: 40 }
+			);
+
+			const box = await screen.findByTestId( 'tooltip-box' );
+			expect( box ).toHaveStyle( { transform: 'translate(70px, 106px)' } );
+			expect( screen.getByTestId( 'wrapper' ) ).toContainElement( box );
+			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveStyle( {
+				left: '34px',
+				top: '-6px',
+			} );
+			expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-A' ) ).toHaveAttribute(
+				'transform',
+				'translate(110, 40)'
+			);
+			expect( screen.getByTestId( 'xy-chart-tooltip-crosshair-vertical' ) ).toHaveAttribute(
+				'y2',
+				'70'
+			);
+			expect( screen.getByTestId( 'xy-chart-tooltip-crosshair-horizontal' ) ).toHaveAttribute(
+				'y1',
+				'40'
+			);
+		} finally {
+			rectSpy.mockRestore();
+		}
+	} );
+
 	test( 'draws one glyph per series in the SVG at the datum position', async () => {
 		renderChart( { showSeriesGlyphs: true }, BOTH_SERIES );
 
@@ -235,6 +302,38 @@ describe( 'XyChartTooltip', () => {
 		expect( horizontal ).toHaveAttribute( 'x2', '180' );
 	} );
 
+	test( 'applies crosshair paint without allowing geometry overrides', async () => {
+		const consumerStyle = {
+			stroke: 'purple',
+			strokeWidth: 8,
+			className: 'custom-crosshair',
+			x1: 999,
+			transform: 'translate(100 0)',
+			style: { strokeOpacity: 0.25, transform: 'translateX(100px)' },
+		};
+		renderChart( {
+			snapTooltipToDatumX: true,
+			snapTooltipToDatumY: true,
+			showVerticalCrosshair: true,
+			showHorizontalCrosshair: true,
+			verticalCrosshairStyle: consumerStyle,
+			horizontalCrosshairStyle: consumerStyle,
+		} );
+
+		for ( const direction of [ 'vertical', 'horizontal' ] ) {
+			const guide = await screen.findByTestId( `xy-chart-tooltip-crosshair-${ direction }` );
+			expect( guide ).toHaveAttribute( 'stroke', 'purple' );
+			expect( guide ).toHaveAttribute( 'stroke-width', '8' );
+			expect( guide ).toHaveClass( 'custom-crosshair' );
+			expect( guide ).toHaveStyle( { 'stroke-opacity': '0.25', transform: 'none' } );
+			expect( guide ).not.toHaveAttribute( 'transform' );
+			expect( guide ).toHaveAttribute( 'x1', direction === 'vertical' ? '100' : '0' );
+			expect( guide ).toHaveAttribute( 'x2', direction === 'vertical' ? '100' : '200' );
+			expect( guide ).toHaveAttribute( 'y1', direction === 'vertical' ? '0' : '50' );
+			expect( guide ).toHaveAttribute( 'y2', direction === 'vertical' ? '100' : '50' );
+		}
+	} );
+
 	test( 'stacks the box above the chart overlays, with zIndex as the override', async () => {
 		const { unmount } = renderChart();
 		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { zIndex: '3' } );
@@ -244,6 +343,26 @@ describe( 'XyChartTooltip', () => {
 		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { zIndex: '9' } );
 	} );
 
+	test.each( [ 'auto', 'below-axis' ] as const )(
+		'preserves %s background and stacking with a partial style override',
+		async tooltipPlacement => {
+			const { unmount } = renderChart( { tooltipPlacement } );
+			const defaultBox = await screen.findByTestId( 'tooltip-box' );
+			const background = defaultBox.style.backgroundColor;
+			expect( background ).not.toBe( '' );
+			expect( background ).not.toBe( 'transparent' );
+			unmount();
+
+			renderChart( { tooltipPlacement, style: { color: 'red' } } );
+
+			await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
+				backgroundColor: background,
+				zIndex: '3',
+				color: 'rgb(255, 0, 0)',
+			} );
+		}
+	);
+
 	test( 'accepts the portal-era options without passing them to the box', async () => {
 		renderChart( { scroll: true, debounce: 50, resizeObserverPolyfill: undefined } );