Update tooltip to use floating-ui instead of react-tether

Author: edmundito

airbyte-webapp/package-lock.json

@@ -22,6 +22,7 @@
     "validate-links": "ts-node --skip-project ./scripts/validate-links.ts"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -52,7 +53,6 @@
     "react-router-dom": "^6.3.0",
     "react-select": "^4.3.1",
     "react-table": "^7.8.0",
-    "react-tether": "^2.0.8",
     "react-use": "^15.3.8",
     "react-use-intercom": "^1.5.2",
     "react-widgets": "^4.6.1",
@@ -92,7 +92,6 @@
     "@types/react-lazylog": "^4.5.1",
     "@types/react-select": "^4.0.16",
     "@types/react-table": "^7.7.12",
-    "@types/react-tether": "^1.0.0",
     "@types/react-widgets": "^4.4.7",
     "@types/sanitize-html": "^2.6.2",
     "@types/styled-components": "^5.1.25",

airbyte-webapp/package.json

@@ -6,12 +6,11 @@
   position: relative;
 }
 
-.toolTip {
+.tooltip {
   font-size: 12px;
   line-height: initial;
 
   padding: variables.$spacing-md;
-  margin: variables.$spacing-sm;
   border-radius: 5px;
   max-width: 300px;
   z-index: variables.$z-tooltip;

airbyte-webapp/src/components/ToolTip/ToolTip.module.scss

@@ -1,26 +1,28 @@
+import { flip, offset, shift, useFloating } from "@floating-ui/react-dom";
 import classNames from "classnames";
 import React, { useState, useEffect } from "react";
-import TetherComponent from "react-tether";
 
 import { tooltipContext } from "./context";
 import styles from "./ToolTip.module.scss";
-import { ToolTipAlignment, ToolTipProps } from "./types";
+import { ToolTipProps } from "./types";
 
-const MOUSE_OUT_TIMEOUT_MS: Readonly<number> = 50;
-
-const TETHER_ATTACHMENT_BY_ALIGNMENT: Readonly<Record<ToolTipAlignment, string>> = {
-  top: "bottom center",
-  right: "middle left",
-  bottom: "top center",
-  left: "middle right",
-};
+const MOUSE_OUT_TIMEOUT_MS = 50;
 
 export const ToolTip: React.FC<ToolTipProps> = (props) => {
-  const { children, control, className, disabled, cursor, theme = "dark", align = "bottom" } = props;
+  const { children, control, className, disabled, cursor, theme = "dark", placement = "bottom" } = props;
 
   const [isMouseOver, setIsMouseOver] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
 
+  const { x, y, reference, floating, strategy } = useFloating({
+    placement,
+    middleware: [
+      offset(5), // $spacing-sm
+      flip(),
+      shift(),
+    ],
+  });
+
   useEffect(() => {
     if (isMouseOver) {
       setIsVisible(true);
@@ -47,31 +49,32 @@ export const ToolTip: React.FC<ToolTipProps> = (props) => {
   };
 
   return (
-    <TetherComponent
-      attachment={TETHER_ATTACHMENT_BY_ALIGNMENT[align]}
-      renderTarget={(ref) => (
+    <>
+      <div
+        ref={reference}
+        className={styles.container}
+        style={disabled ? undefined : { cursor }}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+      >
+        {control}
+      </div>
+      {canShowTooltip && (
         <div
-          ref={ref as React.LegacyRef<HTMLDivElement>}
-          className={styles.container}
-          style={disabled ? undefined : { cursor }}
+          role="tooltip"
+          ref={floating}
+          className={classNames(styles.tooltip, theme === "light" && styles.light, className)}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+          }}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
         >
-          {control}
+          <tooltipContext.Provider value={props}>{children}</tooltipContext.Provider>
         </div>
       )}
-      renderElement={(ref) =>
-        canShowTooltip && (
-          <div
-            ref={ref as React.LegacyRef<HTMLDivElement>}
-            className={classNames(styles.toolTip, theme === "light" && styles.light, className)}
-            onMouseOver={onMouseOver}
-            onMouseOut={onMouseOut}
-          >
-            <tooltipContext.Provider value={props}>{children}</tooltipContext.Provider>
-          </div>
-        )
-      }
-    />
+    </>
   );
 };

airbyte-webapp/src/components/ToolTip/ToolTip.tsx

@@ -1,14 +1,15 @@
+import { Placement } from "@floating-ui/react-dom";
+
 export type ToolTipCursor = "pointer" | "help" | "not-allowed" | "initial";
 export type ToolTipTheme = "dark" | "light";
-export type ToolTipAlignment = "top" | "right" | "bottom" | "left";
 
 export interface ToolTipProps {
   control: React.ReactNode;
   className?: string;
   disabled?: boolean;
   cursor?: ToolTipCursor;
   theme?: ToolTipTheme;
-  align?: ToolTipAlignment;
+  placement?: Placement;
 }
 
 export type TooltipContext = ToolTipProps;

airbyte-webapp/src/components/ToolTip/types.ts

@@ -23,4 +23,5 @@ $width-modal-md: 585px;
 $width-modal-lg: 940px;
 $width-modal-xl: 1008px;
 
-$z-tooltip: 10;
+$z-sidebar: 9999;
+$z-tooltip: $z-sidebar + 1;