@octanejs/visx 0.1.0

package/src/tooltip/floating/useFloatingTooltip.tsrx

@@ -0,0 +1,301 @@
+import {
+	autoUpdate,
+	useDelayGroup,
+	useDismiss,
+	useFloating,
+	useFocus,
+	useHover,
+	useInteractions,
+	useRole,
+} from '@octanejs/floating-ui';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
+import type React from 'react';
+import { getTooltipAnchorReference } from './anchors';
+import { buildFloatingTooltipMiddleware } from './middleware';
+import type { OpenChangeReason, ReferenceElement, UseFloatingReturn } from './internalTypes';
+import type {
+	FloatingTooltipOpenChangeDetails,
+	TooltipAlign,
+	TooltipAnchor,
+	TooltipSide,
+	UseFloatingTooltipOptions,
+	UseFloatingTooltipReturn,
+} from './types';
+
+function getSideAndAlign(placement: string): { side: TooltipSide; align: TooltipAlign } {
+	const [side, align = 'center'] = placement.split('-');
+
+	return {
+		side: side as TooltipSide,
+		align: align as TooltipAlign,
+	};
+}
+
+function getFloatingPropsWithDefaultId<TProps extends React.HTMLProps<HTMLElement>>(
+	props: TProps | undefined,
+	id: string | undefined,
+) {
+	let nextProps = props;
+
+	if (
+		nextProps && nextProps.id === undefined && Object.prototype.hasOwnProperty.call(nextProps, 'id')
+	) {
+		const { id: _id, ...restProps } = nextProps;
+		nextProps = restProps as TProps;
+	}
+
+	if (id != null && nextProps?.id == null) {
+		const propsWithId = { ...nextProps, id };
+		return propsWithId as TProps;
+	}
+
+	return nextProps;
+}
+
+export default function useFloatingTooltip<TData = unknown>(
+	{
+		anchor: anchorProp,
+		arrow = false,
+		collisionBoundary,
+		collisionPadding,
+		data: dataProp,
+		defaultAnchor = null,
+		defaultData,
+		defaultOpen = false,
+		disabled = false,
+		flip = true,
+		hideWhenDetached = false,
+		id,
+		interactions = true,
+		middleware,
+		middlewareMode = 'append',
+		offset = 0,
+		onOpenChange,
+		open: openProp,
+		placement = 'top',
+		role = 'tooltip',
+		shift = true,
+		size = false,
+		strategy = 'absolute',
+		whileElementsMounted = autoUpdate,
+	}: UseFloatingTooltipOptions<TData> = {},
+): UseFloatingTooltipReturn<TData> {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const [uncontrolledAnchor, setUncontrolledAnchor] = useState<TooltipAnchor | null>(defaultAnchor);
+	const [uncontrolledData, setUncontrolledData] = useState<TData | undefined>(defaultData);
+	const [arrowElement, setArrowElement] = useState<SVGSVGElement | null>(null);
+	const [domReference, setDomReference] = useState<ReferenceElement | null>(null);
+	const [fallbackPositionReference, setFallbackPositionReference] = useState<
+		ReferenceElement | null
+	>(null);
+	const hasManagedPositionReferenceRef = useRef(false);
+
+	const isOpenControlled = openProp != null;
+	const isAnchorControlled = anchorProp !== undefined;
+	const isDataControlled = dataProp !== undefined;
+
+	const open =
+		disabled
+			? false
+			: isOpenControlled
+				? Boolean(openProp)
+				: uncontrolledOpen;
+	const anchor = isAnchorControlled ? anchorProp ?? null : uncontrolledAnchor;
+	const data = isDataControlled ? dataProp : uncontrolledData;
+
+	const builtMiddleware = useMemo(
+		() => buildFloatingTooltipMiddleware({
+			arrow,
+			arrowElement,
+			collisionBoundary,
+			collisionPadding,
+			flip,
+			hideWhenDetached,
+			middleware,
+			middlewareMode,
+			offset,
+			shift,
+			size,
+		}),
+		[
+			arrow,
+			arrowElement,
+			collisionBoundary,
+			collisionPadding,
+			flip,
+			hideWhenDetached,
+			middleware,
+			middlewareMode,
+			offset,
+			shift,
+			size,
+		],
+	);
+
+	const handleOpenChange = useCallback((
+		nextOpen: boolean,
+		event?: Event,
+		reason?: OpenChangeReason,
+		details?: Partial<FloatingTooltipOpenChangeDetails<TData>>,
+	) => {
+		if (disabled) return;
+		if (!isOpenControlled) setUncontrolledOpen(nextOpen);
+
+		onOpenChange?.(nextOpen, {
+			data,
+			anchor,
+			...details,
+			event,
+			reason,
+		});
+	}, [anchor, data, disabled, isOpenControlled, onOpenChange]);
+
+	const floating = useFloating({
+		middleware: builtMiddleware,
+		onOpenChange: (nextOpen: boolean, event?: Event, reason?: OpenChangeReason) => handleOpenChange(
+			nextOpen,
+			event,
+			reason,
+		),
+		open,
+		placement,
+		strategy,
+		whileElementsMounted,
+	}) as UseFloatingReturn<ReferenceElement>;
+
+	const interactionOptions =
+		typeof interactions === 'object' ? interactions : {};
+	const interactionsEnabled = interactions !== false && !disabled;
+	const hoverOptions = interactionOptions.hover;
+	const focusOptions = interactionOptions.focus;
+	const dismissOptions = interactionOptions.dismiss;
+	const roleOptions = interactionOptions.role;
+
+	const hoverEnabled = interactionsEnabled && hoverOptions !== false;
+	const focusEnabled = interactionsEnabled && focusOptions !== false;
+	const dismissEnabled = interactionsEnabled && dismissOptions !== false;
+	const roleEnabled = interactionsEnabled && roleOptions !== false;
+	const delayGroup = useDelayGroup(floating.context, { enabled: hoverEnabled });
+
+	const hoverProps = useHover(floating.context, {
+		delay: delayGroup.delay,
+		enabled: hoverEnabled,
+		...(typeof hoverOptions === 'object' ? hoverOptions : null),
+	});
+	const focusProps = useFocus(floating.context, {
+		enabled: focusEnabled,
+		...(typeof focusOptions === 'object' ? focusOptions : null),
+	});
+	const dismissProps = useDismiss(floating.context, {
+		enabled: dismissEnabled,
+		...(typeof dismissOptions === 'object' ? dismissOptions : null),
+	});
+	const roleProps = useRole(floating.context, {
+		enabled: roleEnabled,
+		role,
+		...(typeof roleOptions === 'object' ? roleOptions : null),
+	});
+	const { getFloatingProps, getReferenceProps } = useInteractions([
+		hoverProps,
+		focusProps,
+		dismissProps,
+		roleProps,
+	]);
+
+	const explicitPositionReference = useMemo(() => getTooltipAnchorReference(anchor), [anchor]);
+	const fallbackReference = fallbackPositionReference ?? domReference;
+	const positionReference =
+		anchor == null ? fallbackReference : explicitPositionReference;
+	const hasManagedPositionReference = anchor != null || fallbackReference != null;
+
+	useEffect(() => {
+		if (hasManagedPositionReference || hasManagedPositionReferenceRef.current) {
+			floating.refs.setPositionReference(positionReference);
+			hasManagedPositionReferenceRef.current = hasManagedPositionReference;
+		}
+	}, [floating.refs, hasManagedPositionReference, positionReference]);
+
+	const setReference = useCallback((nextReference: ReferenceElement | null) => {
+		setDomReference(nextReference);
+		floating.refs.setReference(nextReference);
+	}, [floating.refs]);
+
+	const setPositionReference = useCallback((nextReference: ReferenceElement | null) => {
+		setFallbackPositionReference(nextReference);
+		floating.refs.setPositionReference(nextReference);
+	}, [floating.refs]);
+
+	const refs = useMemo(
+		() => ({
+			...floating.refs,
+			setReference,
+			setPositionReference,
+		}),
+		[floating.refs, setPositionReference, setReference],
+	);
+
+	const setAnchor = useCallback((nextAnchor: TooltipAnchor | null) => {
+		if (!isAnchorControlled) setUncontrolledAnchor(nextAnchor);
+	}, [isAnchorControlled]);
+
+	const setData = useCallback((nextData: TData | undefined) => {
+		if (!isDataControlled) setUncontrolledData(nextData);
+	}, [isDataControlled]);
+
+	const openTooltip = useCallback((nextData?: TData, nextAnchor?: TooltipAnchor | null) => {
+		const resolvedData =
+			nextData === undefined ? data : nextData;
+		const resolvedAnchor =
+			nextAnchor === undefined ? anchor : nextAnchor;
+
+		if (nextData !== undefined && !isDataControlled) setUncontrolledData(nextData);
+		if (nextAnchor !== undefined && !isAnchorControlled) setUncontrolledAnchor(nextAnchor);
+
+		handleOpenChange(true, undefined, undefined, {
+			data: resolvedData,
+			anchor: resolvedAnchor,
+		});
+	}, [anchor, data, handleOpenChange, isAnchorControlled, isDataControlled]);
+
+	const closeTooltip = useCallback(() => {
+		handleOpenChange(false);
+	}, [handleOpenChange]);
+
+	const { align, side } = getSideAndAlign(floating.placement);
+	const getFloatingPropsWithId = useCallback(
+		<TProps extends React.HTMLProps<HTMLElement>>(props?: TProps) => getFloatingProps(
+			getFloatingPropsWithDefaultId(props, id),
+		) as TProps,
+		[getFloatingProps, id],
+	);
+
+	return {
+		open,
+		mounted: open,
+		data,
+		anchor,
+		placement: floating.placement,
+		side,
+		align,
+		strategy,
+		x: floating.x,
+		y: floating.y,
+		floatingStyles: floating.floatingStyles,
+		middlewareData: floating.middlewareData,
+		refs,
+		context: floating.context,
+		arrowRef: setArrowElement,
+		setAnchor,
+		setData,
+		update: floating.update,
+		openTooltip,
+		closeTooltip,
+		getReferenceProps: <TProps extends React.HTMLProps<Element>>(props?: TProps) =>
+			getReferenceProps(props) as TProps,
+		getFloatingProps: getFloatingPropsWithId,
+		getArrowProps: <TProps extends React.SVGProps<SVGSVGElement>>(props?: TProps) => {
+			const emptyProps = {};
+			return props ?? emptyProps as TProps;
+		},
+	};
+}

package/src/tooltip/floating/useFloatingTooltip.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { UseFloatingTooltipOptions, UseFloatingTooltipReturn } from './types';
+export default function useFloatingTooltip<TData = unknown>({ anchor: anchorProp, arrow, collisionBoundary, collisionPadding, data: dataProp, defaultAnchor, defaultData, defaultOpen, disabled, flip, hideWhenDetached, id, interactions, middleware, middlewareMode, offset, onOpenChange, open: openProp, placement, role, shift, size, strategy, whileElementsMounted, }?: UseFloatingTooltipOptions<TData>): UseFloatingTooltipReturn<TData>;

package/src/tooltip/hooks/useTooltip.tsrx

@@ -0,0 +1,67 @@
+import { useState, useCallback } from 'octane';
+
+export type UseTooltipParams<TooltipData> = {
+	/** Whether the tooltip is currently open/visible. */
+	tooltipOpen: boolean;
+	/** The left position (in pixels) of the tooltip. */
+	tooltipLeft?: number;
+	/** The top position (in pixels) of the tooltip. */
+	tooltipTop?: number;
+	/** The data associated with the tooltip. */
+	tooltipData?: TooltipData;
+	/** Function to update tooltip state. */
+	updateTooltip: (args: UpdateTooltipArgs<TooltipData>) => void;
+	/** Function to show the tooltip with the specified position and data. */
+	showTooltip: (args: ShowTooltipArgs<TooltipData>) => void;
+	/** Function to hide the tooltip. */
+	hideTooltip: () => void;
+};
+type UseTooltipState<TooltipData> =
+	Pick<UseTooltipParams<TooltipData>, 'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData'>;
+type ValueOrFunc<T> = T | ((t: T) => T);
+type ShowTooltipArgs<TooltipData> = ValueOrFunc<Omit<UseTooltipState<TooltipData>, 'tooltipOpen'>>;
+type UpdateTooltipArgs<TooltipData> = ValueOrFunc<UseTooltipState<TooltipData>>;
+
+export default function useTooltip<TooltipData = {}>(
+	/** Optional initial TooltipState. */
+	initialTooltipState?: Partial<UseTooltipParams<TooltipData>>,
+): UseTooltipParams<TooltipData> {
+	const [tooltipState, setTooltipState] = useState<UseTooltipState<TooltipData>>({
+		tooltipOpen: false,
+		...initialTooltipState,
+	});
+
+	const showTooltip = useCallback(
+		(showArgs: ShowTooltipArgs<TooltipData>) => setTooltipState(
+			typeof showArgs === 'function'
+				? ({ tooltipOpen, ...show }) => ({ ...showArgs(show), tooltipOpen: true })
+				: {
+						tooltipOpen: true,
+						tooltipLeft: showArgs.tooltipLeft,
+						tooltipTop: showArgs.tooltipTop,
+						tooltipData: showArgs.tooltipData,
+					},
+		),
+		[setTooltipState],
+	);
+
+	const hideTooltip = useCallback(
+		() => setTooltipState({
+			tooltipOpen: false,
+			tooltipLeft: undefined,
+			tooltipTop: undefined,
+			tooltipData: undefined,
+		}),
+		[setTooltipState],
+	);
+
+	return {
+		tooltipOpen: tooltipState.tooltipOpen,
+		tooltipLeft: tooltipState.tooltipLeft,
+		tooltipTop: tooltipState.tooltipTop,
+		tooltipData: tooltipState.tooltipData,
+		updateTooltip: setTooltipState,
+		showTooltip,
+		hideTooltip,
+	};
+}

package/src/tooltip/hooks/useTooltip.tsrx.d.ts

@@ -0,0 +1,25 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type UseTooltipParams<TooltipData> = {
+    /** Whether the tooltip is currently open/visible. */
+    tooltipOpen: boolean;
+    /** The left position (in pixels) of the tooltip. */
+    tooltipLeft?: number;
+    /** The top position (in pixels) of the tooltip. */
+    tooltipTop?: number;
+    /** The data associated with the tooltip. */
+    tooltipData?: TooltipData;
+    /** Function to update tooltip state. */
+    updateTooltip: (args: UpdateTooltipArgs<TooltipData>) => void;
+    /** Function to show the tooltip with the specified position and data. */
+    showTooltip: (args: ShowTooltipArgs<TooltipData>) => void;
+    /** Function to hide the tooltip. */
+    hideTooltip: () => void;
+};
+type UseTooltipState<TooltipData> = Pick<UseTooltipParams<TooltipData>, 'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData'>;
+type ValueOrFunc<T> = T | ((t: T) => T);
+type ShowTooltipArgs<TooltipData> = ValueOrFunc<Omit<UseTooltipState<TooltipData>, 'tooltipOpen'>>;
+type UpdateTooltipArgs<TooltipData> = ValueOrFunc<UseTooltipState<TooltipData>>;
+export default function useTooltip<TooltipData = {}>(
+/** Optional initial TooltipState. */
+initialTooltipState?: Partial<UseTooltipParams<TooltipData>>): UseTooltipParams<TooltipData>;
+export {};

package/src/tooltip/hooks/useTooltipInPortal.tsrx

@@ -0,0 +1,92 @@
+import { useEffect, useMemo, useState } from 'octane';
+import type { FC } from 'react';
+import useMeasure from '../../internal/useMeasure.tsrx';
+import type {
+	RectReadOnly,
+	Options as BaseUseMeasureOptions,
+} from '../../internal/useMeasure.tsrx';
+
+import type { PortalProps } from '../Portal.tsrx';
+import Portal from '../Portal.tsrx';
+import type { TooltipProps } from '../tooltips/Tooltip.tsrx';
+import Tooltip from '../tooltips/Tooltip.tsrx';
+import TooltipWithBounds from '../tooltips/TooltipWithBounds.tsrx';
+
+export type TooltipInPortalProps =
+	TooltipProps & Pick<UseTooltipPortalOptions, 'detectBounds' | 'zIndex'>;
+
+export type UseTooltipInPortal = {
+	/** Ref callback to be attached to the container element for boundary detection. */
+	containerRef: (element: HTMLElement | SVGElement | null) => void;
+	/** The bounding box of the container element. */
+	containerBounds: RectReadOnly;
+	/** Function to force a refresh of the container bounds. */
+	forceRefreshBounds: () => void;
+	/** Component to render the tooltip in a portal. */
+	TooltipInPortal: FC<TooltipInPortalProps>;
+};
+
+export type UseTooltipPortalOptions = Pick<PortalProps, 'zIndex'> & {
+		/** whether TooltipWithBounds should be used to auto-detect (page) boundaries and reposition itself. */
+		detectBounds?: boolean;
+		/** Debounce resize or scroll events in milliseconds (needed for positioning) */
+		debounce?: number | { scroll: number; resize: number };
+		/** React to nested scroll changes, don't use this if you know your view is static */
+		scroll?: boolean;
+		/** You can optionally inject a ResizeObserver polyfill. */
+		polyfill?: BaseUseMeasureOptions['polyfill'];
+	};
+
+/**
+ * Hook that handles rendering of a Tooltip or TooltipWithBounds in a Portal.
+ * Handles conversion of container coordinates to page coordinates using the container bounds.
+ */
+export default function useTooltipInPortal(
+	{
+		detectBounds: detectBoundsOption = true,
+		zIndex: zIndexOption,
+		...useMeasureOptions
+	}: UseTooltipPortalOptions | undefined = {},
+): UseTooltipInPortal {
+	const [containerRef, containerBounds, forceRefreshBounds] = useMeasure(useMeasureOptions);
+	// Keep the server and the first hydration render on the same browser-free path.
+	// The effect flips this only after Octane has adopted the existing DOM.
+	const [isSsr, setIsSsr] = useState(true);
+
+	useEffect(() => {
+		setIsSsr(false);
+	}, []);
+
+	const TooltipInPortal = useMemo(
+		() => function ({
+			left: containerLeft = 0,
+			top: containerTop = 0,
+			detectBounds: detectBoundsProp, // allow override at component-level
+			zIndex: zIndexProp, // allow override at the component-level
+			...tooltipProps
+		}: TooltipInPortalProps) {
+			const detectBounds =
+				detectBoundsProp == null ? detectBoundsOption : detectBoundsProp;
+			const zIndex =
+				zIndexProp == null ? zIndexOption : zIndexProp;
+			const TooltipComponent = detectBounds ? TooltipWithBounds : Tooltip;
+			// convert container coordinates to page coordinates
+			const scrollX = isSsr ? 0 : window.scrollX;
+			const scrollY = isSsr ? 0 : window.scrollY;
+			const portalLeft = containerLeft + (containerBounds.left || 0) + scrollX;
+			const portalTop = containerTop + (containerBounds.top || 0) + scrollY;
+
+			return <Portal zIndex={zIndex}>
+				<TooltipComponent left={portalLeft} top={portalTop} {...tooltipProps} />
+			</Portal>;
+		},
+		[detectBoundsOption, zIndexOption, containerBounds.left, containerBounds.top, isSsr],
+	);
+
+	return {
+		containerRef,
+		containerBounds,
+		forceRefreshBounds,
+		TooltipInPortal,
+	};
+}

package/src/tooltip/hooks/useTooltipInPortal.tsrx.d.ts

@@ -0,0 +1,34 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FC } from 'react';
+import type { RectReadOnly, Options as BaseUseMeasureOptions } from '../../internal/useMeasure.tsrx';
+import type { PortalProps } from '../Portal.tsrx';
+import type { TooltipProps } from '../tooltips/Tooltip.tsrx';
+export type TooltipInPortalProps = TooltipProps & Pick<UseTooltipPortalOptions, 'detectBounds' | 'zIndex'>;
+export type UseTooltipInPortal = {
+    /** Ref callback to be attached to the container element for boundary detection. */
+    containerRef: (element: HTMLElement | SVGElement | null) => void;
+    /** The bounding box of the container element. */
+    containerBounds: RectReadOnly;
+    /** Function to force a refresh of the container bounds. */
+    forceRefreshBounds: () => void;
+    /** Component to render the tooltip in a portal. */
+    TooltipInPortal: FC<TooltipInPortalProps>;
+};
+export type UseTooltipPortalOptions = Pick<PortalProps, 'zIndex'> & {
+    /** whether TooltipWithBounds should be used to auto-detect (page) boundaries and reposition itself. */
+    detectBounds?: boolean;
+    /** Debounce resize or scroll events in milliseconds (needed for positioning) */
+    debounce?: number | {
+        scroll: number;
+        resize: number;
+    };
+    /** React to nested scroll changes, don't use this if you know your view is static */
+    scroll?: boolean;
+    /** You can optionally inject a ResizeObserver polyfill. */
+    polyfill?: BaseUseMeasureOptions['polyfill'];
+};
+/**
+ * Hook that handles rendering of a Tooltip or TooltipWithBounds in a Portal.
+ * Handles conversion of container coordinates to page coordinates using the container bounds.
+ */
+export default function useTooltipInPortal({ detectBounds: detectBoundsOption, zIndex: zIndexOption, ...useMeasureOptions }?: UseTooltipPortalOptions | undefined): UseTooltipInPortal;

package/src/tooltip/index.ts

@@ -0,0 +1,20 @@
+// @octanejs/visx/tooltip
+export { default as withTooltip } from './enhancers/withTooltip.tsrx';
+export { default as useTooltip } from './hooks/useTooltip.tsrx';
+export { default as useTooltipInPortal } from './hooks/useTooltipInPortal.tsrx';
+export { useTooltipPosition, TooltipPositionConsumer } from './context/TooltipPositionContext.tsrx';
+export { default as Tooltip, defaultStyles } from './tooltips/Tooltip.tsrx';
+export { default as TooltipWithBounds } from './tooltips/TooltipWithBounds.tsrx';
+export { default as Portal } from './Portal.tsrx';
+
+export type { TooltipPositionContextType } from './context/TooltipPositionContext.tsrx';
+export type { WithTooltipProvidedProps } from './enhancers/withTooltip.tsrx';
+export type { UseTooltipParams } from './hooks/useTooltip.tsrx';
+export type {
+	TooltipInPortalProps,
+	UseTooltipInPortal,
+	UseTooltipPortalOptions,
+} from './hooks/useTooltipInPortal.tsrx';
+export type { PortalProps } from './Portal.tsrx';
+export type { TooltipProps } from './tooltips/Tooltip.tsrx';
+export type { TooltipWithBoundsProps } from './tooltips/TooltipWithBounds.tsrx';

package/src/tooltip/tooltips/Tooltip.tsrx

@@ -0,0 +1,71 @@
+import type { ReactNode, CSSProperties, HTMLAttributes, Ref } from 'react';
+import cx from 'classnames';
+
+export type TooltipProps = {
+	/** Tooltip content. */
+	children?: ReactNode;
+	/** Optional className to apply to the Tooltip in addition to `visx-tooltip`. */
+	className?: string;
+	/** The `left` position of the Tooltip. */
+	left?: number;
+	/** Offset the `left` position of the Tooltip by this margin. */
+	offsetLeft?: number;
+	/** Offset the `top` position of the Tooltip by this margin. */
+	offsetTop?: number;
+	/** Styles to apply, unless `unstyled=true`. */
+	style?: CSSProperties;
+	/** The `top` position of the Tooltip. */
+	top?: number;
+	/**
+ * Applies position: 'absolute' for tooltips to correctly position themselves
+ * when `unstyled=true`. In a future major release this will be the default behavior.
+ */
+	applyPositionStyle?: boolean;
+	/**
+ * Whether to omit applying any style, except `left` / `top`.
+ * In most cases if this is `true` a developer must do one of the following
+ * for positioning to work correctly:
+ * - set `applyPositionStyle=true`
+ * - create a CSS selector like: `.visx-tooltip { position: 'absolute' }`
+ */
+	unstyled?: boolean;
+};
+
+export const defaultStyles: CSSProperties = {
+	position: 'absolute',
+	backgroundColor: 'white',
+	color: '#666666',
+	padding: '0.3rem 0.5rem',
+	borderRadius: '3px',
+	fontSize: '14px',
+	boxShadow: '0 1px 2px rgba(33,33,33,0.2)',
+	lineHeight: '1em',
+	pointerEvents: 'none',
+};
+
+const Tooltip = ({
+	className,
+	top,
+	left,
+	offsetLeft = 10,
+	offsetTop = 10,
+	style = defaultStyles,
+	children,
+	unstyled = false,
+	applyPositionStyle = false,
+	ref,
+	...restProps
+}: TooltipProps & HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) => <div
+	ref={ref}
+	className={cx('visx-tooltip', className)}
+	style={{
+		top: top == null || offsetTop == null ? top : top + offsetTop,
+		left: left == null || offsetLeft == null ? left : left + offsetLeft,
+		...applyPositionStyle && { position: 'absolute' },
+		...!unstyled && style,
+	}}
+	{...restProps}
+>{children}</div>;
+
+Tooltip.displayName = 'Tooltip';
+export default Tooltip

package/src/tooltip/tooltips/Tooltip.tsrx.d.ts

@@ -0,0 +1,39 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, CSSProperties, HTMLAttributes, Ref } from 'react';
+export type TooltipProps = {
+    /** Tooltip content. */
+    children?: ReactNode;
+    /** Optional className to apply to the Tooltip in addition to `visx-tooltip`. */
+    className?: string;
+    /** The `left` position of the Tooltip. */
+    left?: number;
+    /** Offset the `left` position of the Tooltip by this margin. */
+    offsetLeft?: number;
+    /** Offset the `top` position of the Tooltip by this margin. */
+    offsetTop?: number;
+    /** Styles to apply, unless `unstyled=true`. */
+    style?: CSSProperties;
+    /** The `top` position of the Tooltip. */
+    top?: number;
+    /**
+ * Applies position: 'absolute' for tooltips to correctly position themselves
+ * when `unstyled=true`. In a future major release this will be the default behavior.
+ */
+    applyPositionStyle?: boolean;
+    /**
+ * Whether to omit applying any style, except `left` / `top`.
+ * In most cases if this is `true` a developer must do one of the following
+ * for positioning to work correctly:
+ * - set `applyPositionStyle=true`
+ * - create a CSS selector like: `.visx-tooltip { position: 'absolute' }`
+ */
+    unstyled?: boolean;
+};
+export declare const defaultStyles: CSSProperties;
+declare const Tooltip: {
+    ({ className, top, left, offsetLeft, offsetTop, style, children, unstyled, applyPositionStyle, ref, ...restProps }: TooltipProps & HTMLAttributes<HTMLDivElement> & {
+        ref?: Ref<HTMLDivElement>;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export default Tooltip;