fix(tooltip): fallback to left/top positioning, add applyPositionStyle

packages/visx-tooltip/src/tooltips/Tooltip.tsx

@@ -2,13 +2,26 @@ import React from 'react';
 import cx from 'classnames';
 
 export type TooltipProps = {
+  children?: React.ReactNode;
+  className?: string;
   left?: number;
-  top?: number;
   offsetLeft?: number;
   offsetTop?: number;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
+  /** Styles to apply, unless `unstyled=true`. */
+  style?: React.CSSProperties | null;
+  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;
 };
 
@@ -33,17 +46,16 @@ export default function Tooltip({
   style = defaultStyles,
   children,
   unstyled = false,
+  applyPositionStyle = false,
   ...restProps
 }: TooltipProps & React.HTMLProps<HTMLDivElement>) {
   return (
     <div
       className={cx('visx-tooltip', className)}
       style={{
-        left: 0,
-        top: 0,
-        transform: `translate(${
-          left == null || offsetLeft == null ? left ?? 0 : left + offsetLeft
-        }px, ${top == null || offsetTop == null ? top ?? 0 : top + offsetTop}px)`,
+        top: top == null || offsetTop == null ? top : top + offsetTop,
+        left: left == null || offsetLeft == null ? left : left + offsetLeft,
+        ...(applyPositionStyle && { position: 'absolute' }),
         ...(!unstyled && style),
       }}
       {...restProps}

packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx

@@ -3,23 +3,20 @@ import { withBoundingRects, WithBoundingRectsProps } from '@visx/bounds';
 
 import Tooltip, { TooltipProps, defaultStyles } from './Tooltip';
 
-export type TooltipWithBoundsProps = {
-  offsetLeft?: number;
-  offsetTop?: number;
-} & TooltipProps &
+export type TooltipWithBoundsProps = TooltipProps &
   React.HTMLProps<HTMLDivElement> &
   WithBoundingRectsProps;
 
 function TooltipWithBounds({
+  children,
+  getRects,
   left: initialLeft = 0,
-  top: initialTop = 0,
   offsetLeft = 10,
   offsetTop = 10,
-  children,
-  rect: ownBounds,
   parentRect: parentBounds,
-  getRects,
+  rect: ownBounds,
   style = defaultStyles,
+  top: initialTop = 0,
   unstyled = false,
   ...otherProps
 }: TooltipWithBoundsProps) {
@@ -44,12 +41,12 @@ function TooltipWithBounds({
 
   return (
     <Tooltip
-      top={top}
-      left={left}
-      offsetTop={0}
-      offsetLeft={0}
-      style={style}
-      unstyled={unstyled}
+      style={{
+        left: 0,
+        top: 0,
+        transform: `translate(${left}px, ${top}px)`,
+        ...(!unstyled && style),
+      }}
       {...otherProps}
     >
       {children}

packages/visx-tooltip/test/TooltipWithBounds.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { shallow } from 'enzyme';
 import { TooltipWithBounds, defaultStyles } from '../src';
@@ -21,11 +22,7 @@ describe('<TooltipWithBounds />', () => {
     const wrapper = shallow(<TooltipWithBounds unstyled>Hello</TooltipWithBounds>, {
       disableLifecycleMethods: true,
     }).dive();
-    const styles = wrapper
-      .find('Tooltip')
-      .dive()
-      .find('.visx-tooltip')
-      .props().style as any;
+    const styles = wrapper.find('Tooltip').props().style as any;
     Object.keys(defaultStyles).forEach(key => {
       expect(styles[key]).toBeUndefined();
     });