export default function Tooltip()

in support-frontend/assets/components/tooltip/Tooltip.tsx [184:276]
84 lines of code
6 McCabe index (conditional complexity)

export default function Tooltip({
	promptText,
	buttonLabel = 'More information',
	children,
	xAxisOffset,
	yAxisOffset,
	placement,
	desktopOnly,
}: TooltipProps): JSX.Element {
	const [open, setOpen] = useState(false);

	const { x, y, refs, strategy, context } = useFloating({
		open,
		onOpenChange: setOpen,
		placement: placement ? placement : 'top',
		// Make sure the tooltip stays on the screen
		whileElementsMounted: autoUpdate,
		middleware: [
			offset({
				mainAxis: yAxisOffset ? yAxisOffset : 16,
				crossAxis: xAxisOffset ? xAxisOffset : 0,
			}),
			flip({
				// Ensure the tooltip only appears above / below reference element
				fallbackPlacements: ['top', 'bottom'],
			}),
			shift(),
		],
	});

	// Event listeners to change the open state
	const click = useClick(context, { toggle: false });
	const dismiss = useDismiss(context);

	// Merge all the interactions into prop getters
	const { getReferenceProps, getFloatingProps } = useInteractions([
		click,
		dismiss,
	]);

	return (
		<div
			css={tooltipAndCopyContainer}
			ref={refs.setReference}
			{...getReferenceProps()}
		>
			{promptText && <p css={copy}>{promptText}</p>}
			<div css={buttonAndTooltipContainer}>
				<div>
					<Button
						hideLabel
						icon={<InfoRound />}
						priority="tertiary"
						cssOverrides={buttonOverrides}
					>
						{buttonLabel}
					</Button>
				</div>
				<FloatingPortal>
					<div
						role="status"
						css={[tooltipContainer, tooltipContainerDisplay(open, desktopOnly)]}
						ref={refs.setFloating}
						style={{
							// Positioning styles
							position: strategy,
							top: Number(y),
							left: Number(x),
						}}
						{...getFloatingProps()}
					>
						<div css={tooltipCss}>
							{children}
							<Button
								onClick={() => setOpen(false)}
								icon={<SvgCross size="xsmall" />}
								size="small"
								hideLabel
								priority="secondary"
								cssOverrides={closeButtonOverrides}
							>
								Close
							</Button>
							<div
								css={context.placement === 'top' ? arrowBottom : arrowTop}
							></div>
						</div>
					</div>
				</FloatingPortal>
			</div>
		</div>
	);
}