From 463a947e9c6c5e40476525e9226749e14c4520ba Mon Sep 17 00:00:00 2001
From: Shane Stratton <srs_34@hotmail.com>
Date: Mon, 8 Nov 2021 15:00:32 -0500
Subject: [PATCH 1/3] ui/Tooltip - basic implementation of tooltip overlay

---
 packages/ui/src/components/Button.tsx         | 103 ++++---
 .../ui/src/components/ReviewButtonBar.tsx     |   3 +
 .../ui/src/components/Tooltip.stories.tsx     |  93 ++++++
 packages/ui/src/components/Tooltip.tsx        | 275 ++++++++++++++++++
 .../__fixtures__/generateReviewItem.ts        |  11 +
 5 files changed, 439 insertions(+), 46 deletions(-)
 create mode 100644 packages/ui/src/components/Tooltip.stories.tsx
 create mode 100644 packages/ui/src/components/Tooltip.tsx

diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index d303e6786..aa43bcedf 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -19,6 +19,8 @@ import usePrevious from "./hooks/usePrevious";
 import Hoverable from "./Hoverable";
 import Icon from "./Icon";
 import { IconName, IconPosition } from "./IconShared";
+import Tooltip from "./Tooltip";
+
 
 export type ButtonPendingActivationState = "hover" | "pressed" | null;
 
@@ -50,6 +52,7 @@ export type ButtonProps = ButtonContents &
     numberOfLines?: number;
     ellipsizeMode?: TextProps["ellipsizeMode"];
     focusOnMount?: boolean;
+    tooltipText?: string;
   };
 
 const pressedButtonOpacity = 0.2;
@@ -196,7 +199,7 @@ const styles = StyleSheet.create({
 });
 
 export default React.memo(function Button(props: ButtonProps) {
-  const { onPendingInteractionStateDidChange, style } = props;
+  const { onPendingInteractionStateDidChange, style, tooltipText } = props;
   const ref = React.useRef<View | null>(null);
   const href = "href" in props ? props.href : null;
   const onPress = "onPress" in props ? props.onPress : null;
@@ -242,51 +245,59 @@ export default React.memo(function Button(props: ButtonProps) {
       }}
     >
       {(isHovered) => (
-        <Pressable
-          ref={ref}
-          accessible={true}
-          accessibilityRole={href ? "link" : "button"}
-          accessibilityLabel={accessibilityLabel}
-          onPress={
-            onPress
-              ? () => {
-                  isPressed.current = false;
-                  dispatchPendingInteractionState();
-                  onPress();
-                }
-              : () => {
-                  Linking.openURL(href!).catch(() => {
-                    Alert.alert(
-                      "Couldn't open link",
-                      `You may need to install an app to open this URL: ${href}`,
-                    );
-                  });
-                }
-          }
-          onPressIn={() => {
-            isPressed.current = true;
-            dispatchPendingInteractionState();
-          }}
-          onPressOut={() => {
-            isPressed.current = false;
-            dispatchPendingInteractionState();
-          }}
-          // @ts-ignore react-native-web adds this prop
-          delayPressOut={1} // HACK: When a press is completed, we handle onPressOut within onPress so that React batches all updates into a single re-render.
-          disabled={props.disabled}
-          // @ts-ignore react-native-web adds this prop.
-          href={href}
-          hitSlop={props.hitSlop}
-          style={[isSoloIcon && styles.soloIcon, style]}
-        >
-          {({ pressed }) => (
-            <ButtonInterior
-              {...props}
-              isHovered={isHovered}
-              isPressed={pressed}
-            />
-          )}
-        </Pressable>
+          <Pressable
+            ref={ref}
+            accessible={true}
+            accessibilityRole={href ? "link" : "button"}
+            accessibilityLabel={accessibilityLabel}
+            onPress={
+              onPress
+                ? () => {
+                    isPressed.current = false;
+                    dispatchPendingInteractionState();
+                    onPress();
+                  }
+                : () => {
+                    Linking.openURL(href!).catch(() => {
+                      Alert.alert(
+                        "Couldn't open link",
+                        `You may need to install an app to open this URL: ${href}`,
+                      );
+                    });
+                  }
+            }
+            onPressIn={() => {
+              isPressed.current = true;
+              dispatchPendingInteractionState();
+            }}
+            onPressOut={() => {
+              isPressed.current = false;
+              dispatchPendingInteractionState();
+            }}
+            // @ts-ignore react-native-web adds this prop
+            delayPressOut={1} // HACK: When a press is completed, we handle onPressOut within onPress so that React batches all updates into a single re-render.
+            disabled={props.disabled}
+            // @ts-ignore react-native-web adds this prop.
+            href={href}
+            hitSlop={props.hitSlop}
+            style={[isSoloIcon && styles.soloIcon, style]}
+          >
+            {({ pressed }) => (
+              <React.Fragment>
+                {tooltipText && (<Tooltip
+                  anchorRef={ref}
+                  show={isHovered}
+                  text={tooltipText}
+                  placement="inset-bottom-right"
+                />)}
+                <ButtonInterior
+                  {...props}
+                  isHovered={isHovered}
+                  isPressed={pressed}
+                />
+              </React.Fragment>
+            )}
+          </Pressable>
       )}
     </Hoverable>
   );
diff --git a/packages/ui/src/components/ReviewButtonBar.tsx b/packages/ui/src/components/ReviewButtonBar.tsx
index f35d0ea7d..64a73ba41 100644
--- a/packages/ui/src/components/ReviewButtonBar.tsx
+++ b/packages/ui/src/components/ReviewButtonBar.tsx
@@ -168,6 +168,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
               dispatchPendingMarkingInteraction();
             }}
             hitSlop={firstButtonSlop}
+            tooltipText={"Shortcut: 1"}
           />
           {spacer}
           <Button
@@ -186,6 +187,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
               dispatchPendingMarkingInteraction();
             }}
             hitSlop={secondButtonSlop}
+            tooltipText={"Shortcut: Space or 2"}
           />
         </>
       );
@@ -199,6 +201,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
             title={"Show answer"}
             key={"Show answer"}
             hitSlop={secondButtonSlop}
+            tooltipText={"Shortcut: Space"}
           />
         </>
       );
diff --git a/packages/ui/src/components/Tooltip.stories.tsx b/packages/ui/src/components/Tooltip.stories.tsx
new file mode 100644
index 000000000..3db54ccce
--- /dev/null
+++ b/packages/ui/src/components/Tooltip.stories.tsx
@@ -0,0 +1,93 @@
+import { boolean, number, text, select, withKnobs } from "@storybook/addon-knobs";
+
+import React, { useState, useRef } from "react";
+import Hoverable from "./Hoverable";
+import Tooltip from "./Tooltip";
+import { Pressable, View } from "react-native";
+import { MutableRefObject } from "react";
+
+export default {
+  title: "Tooltip",
+  component: Tooltip,
+  decorators: [withKnobs]
+};
+
+export function Text() {
+  const [isHovered, setHovered] = useState(false);
+  const ref = useRef<View | null>(null);
+  return (
+    <Hoverable
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    >
+      <View
+        ref={ref}
+        style={{ border: "1px solid black", width: "200px", height: "100px", padding: 20, margin: 100 }}
+      >
+        <Tooltip 
+          show={isHovered}
+          placement={select("direction", ["top", "right", "bottom", "left", "overlay", "inset-bottom-left", "inset-bottom-right", "inset-top-left", "inset-top-right", "cursor"], "top")}
+          text="Tooltip text"
+          anchorRef={ref}
+        />
+        <div>Some Text That Is Important</div>
+      </View>
+    </Hoverable>
+  );
+}
+
+export function Children() {
+  const [isHovered, setHovered] = useState(false);
+  const ref = useRef<View | null>(null);
+  return (
+    <Hoverable
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    >
+      <View
+        ref={ref}
+        style={{ border: "1px solid black", width: "200px", height: "100px", padding: 20, margin: 100 }}
+      >
+        <Tooltip 
+          show={isHovered}
+          placement={select("placement", ["top", "right", "bottom", "left", "overlay", "inset-bottom-left", "inset-bottom-right", "inset-top-left", "inset-top-right", "cursor"], "top")}
+          text="Tooltip text"
+          anchorRef={ref}
+        >
+          <View style={{ flexDirection: "row", width: "100%", height: "100%", alignItems: "center", justifyContent: "space-around" }}>
+            <View style={{ border: "1px solid red", backgroundColor: "red" }}>
+              <p>L</p>
+            </View>
+            <View style={{ border: "1px solid blue", backgroundColor: "blue" }}>
+              <p>R</p>
+            </View>
+          </View>
+        </Tooltip>
+        <div>Some Text That Is Important</div>
+      </View>
+    </Hoverable>
+  );
+}
+
+export function Button() {
+  const [isHovered, setHovered] = useState(false);
+  const ref = useRef<View | null>(null);
+  return (
+    <Hoverable
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    >
+      <Pressable
+        style={{ border: "1px solid black", width: "120px", height: "50px", margin: 150 }}
+        ref={ref}>
+        <p>A Pressable</p>
+        <Tooltip 
+          show={isHovered}
+          placement={select("placement", ["top", "right", "bottom", "left", "overlay", "inset-bottom-left", "inset-bottom-right", "inset-top-left", "inset-top-right", "cursor"], "top")}
+          text="Tooltip text"
+          anchorRef={ref}
+        />
+      </Pressable>
+    </Hoverable>
+  );
+}
diff --git a/packages/ui/src/components/Tooltip.tsx b/packages/ui/src/components/Tooltip.tsx
new file mode 100644
index 000000000..d67e240b6
--- /dev/null
+++ b/packages/ui/src/components/Tooltip.tsx
@@ -0,0 +1,275 @@
+import React, { useRef, useState, useReducer, useCallback, useMemo } from "react";
+import { useEffect } from "react";
+import {
+  ColorValue,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+
+
+const styles = StyleSheet.create({
+  triangle: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderLeftWidth: 8,
+    borderRightWidth: 8,
+    borderBottomWidth: 16,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: 'white',
+  },
+  container: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    left: 0,
+    top: 0
+  },
+  tooltip: {
+    padding: "10px",
+    backgroundColor: "black",
+    opacity: 0.5,
+    zIndex: 10000,
+  }
+});
+
+type TriangleProps = {
+  pointerColor?: ColorValue;
+  style?: StyleProp<ViewStyle>;
+  placement: TooltipPosition;
+  trianglePosition: { top?: number, left?: number };
+};
+
+const TRIANGLE_ROTATION: { [key: string]: number } = {
+  "bottom": 0,
+  "left": 90,
+  "top": 180,
+  "right": 270
+}
+
+const Triangle: React.FC<TriangleProps> = ({ style, pointerColor, placement, trianglePosition }) => (
+  <View
+    style={StyleSheet.flatten([
+      styles.triangle,
+      {
+        borderBottomColor: pointerColor,
+        transform: [{ rotate: `${TRIANGLE_ROTATION[placement]}deg`}],
+        ...trianglePosition,
+      },
+      style,
+    ])}
+  />
+);
+
+export type TooltipPosition = "top"
+  | "right"
+  | "bottom"
+  | "left"
+  | "overlay"
+  | "inset-bottom-left"
+  | "inset-bottom-right"
+  | "inset-top-left"
+  | "inset-top-right"
+  | "cursor" 
+
+export type TooltipProps = {
+  placement?: TooltipPosition;
+  stayOnScreen?: boolean;
+  show: boolean;
+  anchorRef: React.MutableRefObject<View | null>;
+} & ({ text: string; } | { children: React.ReactNode; })
+
+const getPositions = (
+  { placement, anchor, tooltip }: { placement: string, anchor: Measure, tooltip: Measure }
+): TooltipState => {
+  switch (placement) {
+    case "top":
+      return {
+        tooltipPosition: { top: -tooltip.height - 16, left: anchor.width/2 - tooltip.width/2 },
+        trianglePosition: { top: tooltip.height - 1, left: tooltip.width/2 - 7.5 }
+      }
+    case "right":
+      return {
+        tooltipPosition: { top: anchor.height/2 - tooltip.height/2, left: anchor.width + 15 },
+        trianglePosition: { top: tooltip.height/2 - 7.5, left: -15 }
+      }
+    case "bottom":
+      return {
+        tooltipPosition: { top: anchor.height + 15, left: anchor.width/2 - tooltip.width/2 },
+        trianglePosition: { top: -15, left: tooltip.width/2 - 7.5 }
+      }
+    case "left":
+      return {
+        tooltipPosition: { top: anchor.height/2 - tooltip.height/2, left: -tooltip.width - 16 },
+        trianglePosition: { top: tooltip.height/2 - 7.5, left: tooltip.width - 1 }
+      }
+    case "overlay":
+      return {
+        tooltipPosition: { top: 0, left: 0, width: anchor.width, height: anchor.height },
+        trianglePosition: {}
+      }
+    case "inset-bottom-left":
+      return {
+        tooltipPosition: { bottom: 0, left: 0 },
+        trianglePosition: {}
+      }
+    case "inset-top-left":
+      return {
+        tooltipPosition: { top: 0, left: 0 },
+        trianglePosition: {}
+      }
+    case "inset-top-right":
+      return {
+        tooltipPosition: { top: 0, right: 0 },
+        trianglePosition: {}
+      }
+    case "inset-bottom-right":
+      return {
+        tooltipPosition: { bottom: 0, right: 0 },
+        trianglePosition: {}
+      }
+    default:
+      return { tooltipPosition: {}, trianglePosition: {} }
+  }
+}
+
+type UIPosition = { top?: number, bottom?: number, left?: number, right?: number, width?: number, height?: number }
+
+type TooltipState = {
+  tooltipPosition?: UIPosition,
+  trianglePosition?: UIPosition,
+}
+
+type Measure = { width?: number, height?: number, x?: number, y?: number, pageX?: number, pageY?: number, }
+
+export default (props: TooltipProps) => {
+  const {
+    placement = "top",
+    show,
+    anchorRef,
+    text,
+    children,
+  } = props;
+
+  const tooltipRef = useRef<View | null>(null)
+  const containerRef = useRef<View | null>(null)
+
+  const [{ tooltipPosition, trianglePosition }, dispatch] = useReducer((
+    state: TooltipState,
+    { type, payload }: { type: string, payload: any }
+  ) => {
+    if (type === "init") {
+      return { ...getPositions(payload) }
+    }
+    if (type === "move") {
+      return {
+        tooltipPosition: { ...payload }
+      }
+    }
+    return state
+  }, {})
+
+  const [containerMeasure, setContainerMeasure] = useState<Measure>({})
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.measure((x, y, width, height, pageX, pageY) => {
+        setContainerMeasure({
+          pageX,
+          pageY,
+        })
+      })
+    }
+  }, [containerRef])
+
+  const [anchorMeasure, setAnchorMeasure] = useState<Measure>({})
+  useEffect(() => {
+    if (anchorRef.current) {
+      anchorRef.current.measure((x, y, width, height) => {
+        setAnchorMeasure({
+          width,
+          height,
+        })
+      })
+    }
+  }, [anchorRef])
+  
+  useEffect(() => {
+    if (anchorMeasure.width && tooltipRef.current) {
+      tooltipRef.current.measure((x, y, width, height) => {
+        dispatch({
+          type: "init",
+          payload: {
+            placement,
+            anchor: anchorMeasure,
+            tooltip: { width, height }
+          }
+        })
+      })
+    }
+  }, [
+    anchorMeasure,
+    tooltipRef.current,
+    show,
+    placement
+  ])
+
+  const trackCursor = useCallback(
+    (e: React.MouseEvent) => {
+      if (!containerMeasure) return
+      dispatch({
+        type: "move",
+        payload: {
+          top: e.clientY - containerMeasure.pageY,
+          left: e.clientX - containerMeasure.pageX,
+        }
+      })
+    },
+    [containerMeasure]
+  )
+
+  const mouseEvents = useMemo(() => placement === "cursor" ? {
+    onMouseMove: trackCursor,
+  } : {}, [placement, trackCursor])
+
+  // TODO: a "stay-on-screen" effect
+  // TODO: potentially use composition instead of anchorRef
+  // =====] how do you do this without affecting the child's original context?
+  // =====] e.g. for current Hoverable/Button implementation we require Pressable to receive mouse events
+
+  // embedded views to pick up the "cursor" event
+  return (
+    <View
+      ref={containerRef}
+      style={styles.container}
+      {...mouseEvents}
+    >
+      <View
+        ref={tooltipRef}
+        style={StyleSheet.flatten([
+          (
+            !show || (placement === "cursor" && !tooltipPosition.left)
+          ) && { visibility: "hidden" },
+          {
+            position: (placement.indexOf("inset") === 0 || placement === "cursor") ? "absolute" : "relative",
+            width: placement === "overlay" ? "100%" : "fit-content",
+            height: placement === "overlay" ? "100%" : "fit-content",
+            ...tooltipPosition
+          },
+          styles.tooltip,
+        ])}
+      >
+        {["top", "right", "bottom", "left"].includes(placement) && <Triangle placement={placement} trianglePosition={trianglePosition} />}
+        {children || (
+          <div style={{ color: "white" }}>
+            {text}
+          </div>
+        )}
+      </View>
+    </View>
+  );
+};
diff --git a/packages/ui/src/components/__fixtures__/generateReviewItem.ts b/packages/ui/src/components/__fixtures__/generateReviewItem.ts
index aabe33072..218bf2ca8 100644
--- a/packages/ui/src/components/__fixtures__/generateReviewItem.ts
+++ b/packages/ui/src/components/__fixtures__/generateReviewItem.ts
@@ -24,6 +24,17 @@ export function generateReviewItem(
     componentID: mainTaskComponentID,
     spec: {
       ...testQASpec,
+      content: {
+        ...testQASpec.content,
+        body: {
+          ...testQASpec.content.body,
+          text: questionText,
+        },
+        answer: {
+          ...testQASpec.content.answer,
+          text: answerText,
+        }
+      }
     },
   };
 }

From bd32ec24b24dde1aa518d5d51ac0aa79391e66a5 Mon Sep 17 00:00:00 2001
From: Andy Matuschak <andy@andymatuschak.org>
Date: Mon, 13 Dec 2021 16:32:53 -0800
Subject: [PATCH 2/3] Fixed most but not all type errors, all lint errors

---
 packages/ui/src/components/Button.tsx         |  99 +++---
 .../ui/src/components/Tooltip.stories.tsx     | 132 ++++++--
 packages/ui/src/components/Tooltip.tsx        | 309 +++++++++++-------
 .../__fixtures__/generateReviewItem.ts        |   4 +-
 4 files changed, 344 insertions(+), 200 deletions(-)

diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index aa43bcedf..915b26f6b 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -21,7 +21,6 @@ import Icon from "./Icon";
 import { IconName, IconPosition } from "./IconShared";
 import Tooltip from "./Tooltip";
 
-
 export type ButtonPendingActivationState = "hover" | "pressed" | null;
 
 type ButtonContents =
@@ -245,59 +244,61 @@ export default React.memo(function Button(props: ButtonProps) {
       }}
     >
       {(isHovered) => (
-          <Pressable
-            ref={ref}
-            accessible={true}
-            accessibilityRole={href ? "link" : "button"}
-            accessibilityLabel={accessibilityLabel}
-            onPress={
-              onPress
-                ? () => {
-                    isPressed.current = false;
-                    dispatchPendingInteractionState();
-                    onPress();
-                  }
-                : () => {
-                    Linking.openURL(href!).catch(() => {
-                      Alert.alert(
-                        "Couldn't open link",
-                        `You may need to install an app to open this URL: ${href}`,
-                      );
-                    });
-                  }
-            }
-            onPressIn={() => {
-              isPressed.current = true;
-              dispatchPendingInteractionState();
-            }}
-            onPressOut={() => {
-              isPressed.current = false;
-              dispatchPendingInteractionState();
-            }}
-            // @ts-ignore react-native-web adds this prop
-            delayPressOut={1} // HACK: When a press is completed, we handle onPressOut within onPress so that React batches all updates into a single re-render.
-            disabled={props.disabled}
-            // @ts-ignore react-native-web adds this prop.
-            href={href}
-            hitSlop={props.hitSlop}
-            style={[isSoloIcon && styles.soloIcon, style]}
-          >
-            {({ pressed }) => (
-              <React.Fragment>
-                {tooltipText && (<Tooltip
+        <Pressable
+          ref={ref}
+          accessible={true}
+          accessibilityRole={href ? "link" : "button"}
+          accessibilityLabel={accessibilityLabel}
+          onPress={
+            onPress
+              ? () => {
+                  isPressed.current = false;
+                  dispatchPendingInteractionState();
+                  onPress();
+                }
+              : () => {
+                  Linking.openURL(href!).catch(() => {
+                    Alert.alert(
+                      "Couldn't open link",
+                      `You may need to install an app to open this URL: ${href}`,
+                    );
+                  });
+                }
+          }
+          onPressIn={() => {
+            isPressed.current = true;
+            dispatchPendingInteractionState();
+          }}
+          onPressOut={() => {
+            isPressed.current = false;
+            dispatchPendingInteractionState();
+          }}
+          // @ts-ignore react-native-web adds this prop
+          delayPressOut={1} // HACK: When a press is completed, we handle onPressOut within onPress so that React batches all updates into a single re-render.
+          disabled={props.disabled}
+          // @ts-ignore react-native-web adds this prop.
+          href={href}
+          hitSlop={props.hitSlop}
+          style={[isSoloIcon && styles.soloIcon, style]}
+        >
+          {({ pressed }) => (
+            <React.Fragment>
+              {tooltipText && (
+                <Tooltip
                   anchorRef={ref}
                   show={isHovered}
                   text={tooltipText}
                   placement="inset-bottom-right"
-                />)}
-                <ButtonInterior
-                  {...props}
-                  isHovered={isHovered}
-                  isPressed={pressed}
                 />
-              </React.Fragment>
-            )}
-          </Pressable>
+              )}
+              <ButtonInterior
+                {...props}
+                isHovered={isHovered}
+                isPressed={pressed}
+              />
+            </React.Fragment>
+          )}
+        </Pressable>
       )}
     </Hoverable>
   );
diff --git a/packages/ui/src/components/Tooltip.stories.tsx b/packages/ui/src/components/Tooltip.stories.tsx
index 3db54ccce..4ef3e9e1c 100644
--- a/packages/ui/src/components/Tooltip.stories.tsx
+++ b/packages/ui/src/components/Tooltip.stories.tsx
@@ -1,15 +1,14 @@
-import { boolean, number, text, select, withKnobs } from "@storybook/addon-knobs";
+import { select, withKnobs } from "@storybook/addon-knobs";
 
-import React, { useState, useRef } from "react";
+import React, { useRef, useState } from "react";
+import { Pressable, View } from "react-native";
 import Hoverable from "./Hoverable";
 import Tooltip from "./Tooltip";
-import { Pressable, View } from "react-native";
-import { MutableRefObject } from "react";
 
 export default {
   title: "Tooltip",
   component: Tooltip,
-  decorators: [withKnobs]
+  decorators: [withKnobs],
 };
 
 export function Text() {
@@ -22,14 +21,37 @@ export function Text() {
     >
       <View
         ref={ref}
-        style={{ border: "1px solid black", width: "200px", height: "100px", padding: 20, margin: 100 }}
+        style={{
+          borderWidth: 1,
+          borderColor: "black",
+          width: "200px",
+          height: "100px",
+          padding: 20,
+          margin: 100,
+        }}
       >
-        <Tooltip 
+        <Tooltip
           show={isHovered}
-          placement={select("direction", ["top", "right", "bottom", "left", "overlay", "inset-bottom-left", "inset-bottom-right", "inset-top-left", "inset-top-right", "cursor"], "top")}
-          text="Tooltip text"
+          placement={select(
+            "direction",
+            [
+              "top",
+              "right",
+              "bottom",
+              "left",
+              "overlay",
+              "inset-bottom-left",
+              "inset-bottom-right",
+              "inset-top-left",
+              "inset-top-right",
+              "cursor",
+            ],
+            "top",
+          )}
           anchorRef={ref}
-        />
+        >
+          Tooltip text
+        </Tooltip>
         <div>Some Text That Is Important</div>
       </View>
     </Hoverable>
@@ -46,19 +68,60 @@ export function Children() {
     >
       <View
         ref={ref}
-        style={{ border: "1px solid black", width: "200px", height: "100px", padding: 20, margin: 100 }}
+        style={{
+          borderWidth: 1,
+          borderColor: "black",
+          width: "200px",
+          height: "100px",
+          padding: 20,
+          margin: 100,
+        }}
       >
-        <Tooltip 
+        <Tooltip
           show={isHovered}
-          placement={select("placement", ["top", "right", "bottom", "left", "overlay", "inset-bottom-left", "inset-bottom-right", "inset-top-left", "inset-top-right", "cursor"], "top")}
-          text="Tooltip text"
+          placement={select(
+            "placement",
+            [
+              "top",
+              "right",
+              "bottom",
+              "left",
+              "overlay",
+              "inset-bottom-left",
+              "inset-bottom-right",
+              "inset-top-left",
+              "inset-top-right",
+              "cursor",
+            ],
+            "top",
+          )}
           anchorRef={ref}
         >
-          <View style={{ flexDirection: "row", width: "100%", height: "100%", alignItems: "center", justifyContent: "space-around" }}>
-            <View style={{ border: "1px solid red", backgroundColor: "red" }}>
+          <View
+            style={{
+              flexDirection: "row",
+              width: "100%",
+              height: "100%",
+              alignItems: "center",
+              justifyContent: "space-around",
+            }}
+          >
+            <View
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                backgroundColor: "red",
+              }}
+            >
               <p>L</p>
             </View>
-            <View style={{ border: "1px solid blue", backgroundColor: "blue" }}>
+            <View
+              style={{
+                borderWidth: 1,
+                borderColor: "blue",
+                backgroundColor: "blue",
+              }}
+            >
               <p>R</p>
             </View>
           </View>
@@ -78,15 +141,38 @@ export function Button() {
       onHoverOut={() => setHovered(false)}
     >
       <Pressable
-        style={{ border: "1px solid black", width: "120px", height: "50px", margin: 150 }}
-        ref={ref}>
+        style={{
+          borderWidth: 1,
+          borderColor: "black",
+          width: "120px",
+          height: "50px",
+          margin: 150,
+        }}
+        ref={ref}
+      >
         <p>A Pressable</p>
-        <Tooltip 
+        <Tooltip
           show={isHovered}
-          placement={select("placement", ["top", "right", "bottom", "left", "overlay", "inset-bottom-left", "inset-bottom-right", "inset-top-left", "inset-top-right", "cursor"], "top")}
-          text="Tooltip text"
+          placement={select(
+            "placement",
+            [
+              "top",
+              "right",
+              "bottom",
+              "left",
+              "overlay",
+              "inset-bottom-left",
+              "inset-bottom-right",
+              "inset-top-left",
+              "inset-top-right",
+              "cursor",
+            ],
+            "top",
+          )}
           anchorRef={ref}
-        />
+        >
+          Tooltip text
+        </Tooltip>
       </Pressable>
     </Hoverable>
   );
diff --git a/packages/ui/src/components/Tooltip.tsx b/packages/ui/src/components/Tooltip.tsx
index d67e240b6..1607beb7e 100644
--- a/packages/ui/src/components/Tooltip.tsx
+++ b/packages/ui/src/components/Tooltip.tsx
@@ -1,5 +1,11 @@
-import React, { useRef, useState, useReducer, useCallback, useMemo } from "react";
-import { useEffect } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
 import {
   ColorValue,
   StyleProp,
@@ -8,57 +14,61 @@ import {
   ViewStyle,
 } from "react-native";
 
-
 const styles = StyleSheet.create({
   triangle: {
-    position: 'absolute',
+    position: "absolute",
     width: 0,
     height: 0,
-    backgroundColor: 'transparent',
-    borderStyle: 'solid',
+    backgroundColor: "transparent",
+    borderStyle: "solid",
     borderLeftWidth: 8,
     borderRightWidth: 8,
     borderBottomWidth: 16,
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderBottomColor: 'white',
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    borderBottomColor: "white",
   },
   container: {
     position: "absolute",
     width: "100%",
     height: "100%",
     left: 0,
-    top: 0
+    top: 0,
   },
   tooltip: {
     padding: "10px",
     backgroundColor: "black",
     opacity: 0.5,
     zIndex: 10000,
-  }
+  },
 });
 
 type TriangleProps = {
   pointerColor?: ColorValue;
   style?: StyleProp<ViewStyle>;
   placement: TooltipPosition;
-  trianglePosition: { top?: number, left?: number };
+  trianglePosition: { top?: number; left?: number };
 };
 
-const TRIANGLE_ROTATION: { [key: string]: number } = {
-  "bottom": 0,
-  "left": 90,
-  "top": 180,
-  "right": 270
-}
+const triangleAnglesByPlacement: { [key: string]: number } = {
+  bottom: 0,
+  left: 90,
+  top: 180,
+  right: 270,
+};
 
-const Triangle: React.FC<TriangleProps> = ({ style, pointerColor, placement, trianglePosition }) => (
+const Triangle: React.FC<TriangleProps> = ({
+  style,
+  pointerColor,
+  placement,
+  trianglePosition,
+}) => (
   <View
     style={StyleSheet.flatten([
       styles.triangle,
       {
         borderBottomColor: pointerColor,
-        transform: [{ rotate: `${TRIANGLE_ROTATION[placement]}deg`}],
+        transform: [{ rotate: `${triangleAnglesByPlacement[placement]}deg` }],
         ...trianglePosition,
       },
       style,
@@ -66,7 +76,8 @@ const Triangle: React.FC<TriangleProps> = ({ style, pointerColor, placement, tri
   />
 );
 
-export type TooltipPosition = "top"
+export type TooltipPosition =
+  | "top"
   | "right"
   | "bottom"
   | "left"
@@ -75,166 +86,211 @@ export type TooltipPosition = "top"
   | "inset-bottom-right"
   | "inset-top-left"
   | "inset-top-right"
-  | "cursor" 
+  | "cursor";
 
 export type TooltipProps = {
   placement?: TooltipPosition;
   stayOnScreen?: boolean;
   show: boolean;
   anchorRef: React.MutableRefObject<View | null>;
-} & ({ text: string; } | { children: React.ReactNode; })
+  children: React.ReactNode;
+};
 
-const getPositions = (
-  { placement, anchor, tooltip }: { placement: string, anchor: Measure, tooltip: Measure }
-): TooltipState => {
+const getPositions = ({
+  placement,
+  anchor,
+  tooltip,
+}: {
+  placement: string;
+  anchor: Size;
+  tooltip: Size;
+}): TooltipState => {
   switch (placement) {
     case "top":
       return {
-        tooltipPosition: { top: -tooltip.height - 16, left: anchor.width/2 - tooltip.width/2 },
-        trianglePosition: { top: tooltip.height - 1, left: tooltip.width/2 - 7.5 }
-      }
+        tooltipPosition: {
+          top: -tooltip.height - 16,
+          left: anchor.width / 2 - tooltip.width / 2,
+        },
+        trianglePosition: {
+          top: tooltip.height - 1,
+          left: tooltip.width / 2 - 7.5,
+        },
+      };
     case "right":
       return {
-        tooltipPosition: { top: anchor.height/2 - tooltip.height/2, left: anchor.width + 15 },
-        trianglePosition: { top: tooltip.height/2 - 7.5, left: -15 }
-      }
+        tooltipPosition: {
+          top: anchor.height / 2 - tooltip.height / 2,
+          left: anchor.width + 15,
+        },
+        trianglePosition: { top: tooltip.height / 2 - 7.5, left: -15 },
+      };
     case "bottom":
       return {
-        tooltipPosition: { top: anchor.height + 15, left: anchor.width/2 - tooltip.width/2 },
-        trianglePosition: { top: -15, left: tooltip.width/2 - 7.5 }
-      }
+        tooltipPosition: {
+          top: anchor.height + 15,
+          left: anchor.width / 2 - tooltip.width / 2,
+        },
+        trianglePosition: { top: -15, left: tooltip.width / 2 - 7.5 },
+      };
     case "left":
       return {
-        tooltipPosition: { top: anchor.height/2 - tooltip.height/2, left: -tooltip.width - 16 },
-        trianglePosition: { top: tooltip.height/2 - 7.5, left: tooltip.width - 1 }
-      }
+        tooltipPosition: {
+          top: anchor.height / 2 - tooltip.height / 2,
+          left: -tooltip.width - 16,
+        },
+        trianglePosition: {
+          top: tooltip.height / 2 - 7.5,
+          left: tooltip.width - 1,
+        },
+      };
     case "overlay":
       return {
-        tooltipPosition: { top: 0, left: 0, width: anchor.width, height: anchor.height },
-        trianglePosition: {}
-      }
+        tooltipPosition: {
+          top: 0,
+          left: 0,
+          width: anchor.width,
+          height: anchor.height,
+        },
+        trianglePosition: {},
+      };
     case "inset-bottom-left":
       return {
         tooltipPosition: { bottom: 0, left: 0 },
-        trianglePosition: {}
-      }
+        trianglePosition: {},
+      };
     case "inset-top-left":
       return {
         tooltipPosition: { top: 0, left: 0 },
-        trianglePosition: {}
-      }
+        trianglePosition: {},
+      };
     case "inset-top-right":
       return {
         tooltipPosition: { top: 0, right: 0 },
-        trianglePosition: {}
-      }
+        trianglePosition: {},
+      };
     case "inset-bottom-right":
       return {
         tooltipPosition: { bottom: 0, right: 0 },
-        trianglePosition: {}
-      }
+        trianglePosition: {},
+      };
     default:
-      return { tooltipPosition: {}, trianglePosition: {} }
+      return { tooltipPosition: {}, trianglePosition: {} };
   }
-}
+};
 
-type UIPosition = { top?: number, bottom?: number, left?: number, right?: number, width?: number, height?: number }
+type UIPosition = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+  width?: number;
+  height?: number;
+};
 
 type TooltipState = {
-  tooltipPosition?: UIPosition,
-  trianglePosition?: UIPosition,
-}
+  tooltipPosition?: UIPosition;
+  trianglePosition?: UIPosition;
+};
 
-type Measure = { width?: number, height?: number, x?: number, y?: number, pageX?: number, pageY?: number, }
+type Position = {
+  x: number;
+  y: number;
+};
+
+type Size = {
+  width: number;
+  height: number;
+};
 
 export default (props: TooltipProps) => {
-  const {
-    placement = "top",
-    show,
-    anchorRef,
-    text,
-    children,
-  } = props;
+  const { placement = "top", show, anchorRef, children } = props;
 
-  const tooltipRef = useRef<View | null>(null)
-  const containerRef = useRef<View | null>(null)
+  const tooltipRef = useRef<View | null>(null);
+  const containerRef = useRef<View | null>(null);
 
-  const [{ tooltipPosition, trianglePosition }, dispatch] = useReducer((
-    state: TooltipState,
-    { type, payload }: { type: string, payload: any }
-  ) => {
-    if (type === "init") {
-      return { ...getPositions(payload) }
-    }
-    if (type === "move") {
-      return {
-        tooltipPosition: { ...payload }
+  const [{ tooltipPosition, trianglePosition }, dispatch] = useReducer(
+    (
+      state: TooltipState,
+      { type, payload }: { type: string; payload: any },
+    ) => {
+      if (type === "init") {
+        return { ...getPositions(payload) };
       }
-    }
-    return state
-  }, {})
+      if (type === "move") {
+        return {
+          tooltipPosition: { ...payload },
+        };
+      }
+      return state;
+    },
+    {},
+  );
 
-  const [containerMeasure, setContainerMeasure] = useState<Measure>({})
+  const [containerPosition, setContainerPosition] = useState<Position | null>(
+    null,
+  );
   useEffect(() => {
     if (containerRef.current) {
       containerRef.current.measure((x, y, width, height, pageX, pageY) => {
-        setContainerMeasure({
-          pageX,
-          pageY,
-        })
-      })
+        setContainerPosition({
+          x: pageX,
+          y: pageY,
+        });
+      });
     }
-  }, [containerRef])
+  }, [containerRef]);
 
-  const [anchorMeasure, setAnchorMeasure] = useState<Measure>({})
+  const [anchorMeasure, setAnchorMeasure] = useState<Size | null>(null);
   useEffect(() => {
     if (anchorRef.current) {
       anchorRef.current.measure((x, y, width, height) => {
         setAnchorMeasure({
           width,
           height,
-        })
-      })
+        });
+      });
     }
-  }, [anchorRef])
-  
+  }, [anchorRef]);
+
   useEffect(() => {
-    if (anchorMeasure.width && tooltipRef.current) {
+    if (anchorMeasure?.width && tooltipRef.current) {
       tooltipRef.current.measure((x, y, width, height) => {
         dispatch({
           type: "init",
           payload: {
             placement,
             anchor: anchorMeasure,
-            tooltip: { width, height }
-          }
-        })
-      })
+            tooltip: { width, height },
+          },
+        });
+      });
     }
-  }, [
-    anchorMeasure,
-    tooltipRef.current,
-    show,
-    placement
-  ])
+  }, [anchorMeasure, show, placement]);
 
   const trackCursor = useCallback(
     (e: React.MouseEvent) => {
-      if (!containerMeasure) return
+      if (!containerPosition) return;
       dispatch({
         type: "move",
         payload: {
-          top: e.clientY - containerMeasure.pageY,
-          left: e.clientX - containerMeasure.pageX,
-        }
-      })
+          top: e.clientY - containerPosition.y,
+          left: e.clientX - containerPosition.x,
+        },
+      });
     },
-    [containerMeasure]
-  )
+    [containerPosition],
+  );
 
-  const mouseEvents = useMemo(() => placement === "cursor" ? {
-    onMouseMove: trackCursor,
-  } : {}, [placement, trackCursor])
+  const mouseEvents = useMemo(
+    () =>
+      placement === "cursor"
+        ? {
+            onMouseMove: trackCursor,
+          }
+        : {},
+    [placement, trackCursor],
+  );
 
   // TODO: a "stay-on-screen" effect
   // TODO: potentially use composition instead of anchorRef
@@ -243,31 +299,32 @@ export default (props: TooltipProps) => {
 
   // embedded views to pick up the "cursor" event
   return (
-    <View
-      ref={containerRef}
-      style={styles.container}
-      {...mouseEvents}
-    >
+    <View ref={containerRef} style={styles.container} {...mouseEvents}>
       <View
         ref={tooltipRef}
         style={StyleSheet.flatten([
-          (
-            !show || (placement === "cursor" && !tooltipPosition.left)
-          ) && { visibility: "hidden" },
+          (!show || (placement === "cursor" && !tooltipPosition.left)) && {
+            visibility: "hidden",
+          },
           {
-            position: (placement.indexOf("inset") === 0 || placement === "cursor") ? "absolute" : "relative",
+            position:
+              placement.indexOf("inset") === 0 || placement === "cursor"
+                ? "absolute"
+                : "relative",
             width: placement === "overlay" ? "100%" : "fit-content",
             height: placement === "overlay" ? "100%" : "fit-content",
-            ...tooltipPosition
+            ...tooltipPosition,
           },
           styles.tooltip,
         ])}
       >
-        {["top", "right", "bottom", "left"].includes(placement) && <Triangle placement={placement} trianglePosition={trianglePosition} />}
-        {children || (
-          <div style={{ color: "white" }}>
-            {text}
-          </div>
+        {["top", "right", "bottom", "left"].includes(placement) && (
+          <Triangle placement={placement} trianglePosition={trianglePosition} />
+        )}
+        {typeof children === "string" ? (
+          <div style={{ color: "white" }}>{children}</div>
+        ) : (
+          children
         )}
       </View>
     </View>
diff --git a/packages/ui/src/components/__fixtures__/generateReviewItem.ts b/packages/ui/src/components/__fixtures__/generateReviewItem.ts
index 218bf2ca8..2975f16be 100644
--- a/packages/ui/src/components/__fixtures__/generateReviewItem.ts
+++ b/packages/ui/src/components/__fixtures__/generateReviewItem.ts
@@ -33,8 +33,8 @@ export function generateReviewItem(
         answer: {
           ...testQASpec.content.answer,
           text: answerText,
-        }
-      }
+        },
+      },
     },
   };
 }

From 3d23867599b4c7c06a16c1f8a9163ce42f5eadd1 Mon Sep 17 00:00:00 2001
From: Goondrious <srs_34@hotmail.com>
Date: Sun, 2 Jan 2022 13:17:58 -0500
Subject: [PATCH 3/3] Tooltip - remove cursor type, some type fixes

---
 packages/ui/src/components/Button.tsx         |   5 +-
 .../ui/src/components/Tooltip.stories.tsx     |   3 -
 packages/ui/src/components/Tooltip.tsx        | 145 ++++++------------
 3 files changed, 47 insertions(+), 106 deletions(-)

diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index 915b26f6b..abead28d0 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -287,9 +287,10 @@ export default React.memo(function Button(props: ButtonProps) {
                 <Tooltip
                   anchorRef={ref}
                   show={isHovered}
-                  text={tooltipText}
                   placement="inset-bottom-right"
-                />
+                >
+                  {tooltipText}
+                </Tooltip>
               )}
               <ButtonInterior
                 {...props}
diff --git a/packages/ui/src/components/Tooltip.stories.tsx b/packages/ui/src/components/Tooltip.stories.tsx
index 4ef3e9e1c..3a98079e6 100644
--- a/packages/ui/src/components/Tooltip.stories.tsx
+++ b/packages/ui/src/components/Tooltip.stories.tsx
@@ -44,7 +44,6 @@ export function Text() {
               "inset-bottom-right",
               "inset-top-left",
               "inset-top-right",
-              "cursor",
             ],
             "top",
           )}
@@ -91,7 +90,6 @@ export function Children() {
               "inset-bottom-right",
               "inset-top-left",
               "inset-top-right",
-              "cursor",
             ],
             "top",
           )}
@@ -165,7 +163,6 @@ export function Button() {
               "inset-bottom-right",
               "inset-top-left",
               "inset-top-right",
-              "cursor",
             ],
             "top",
           )}
diff --git a/packages/ui/src/components/Tooltip.tsx b/packages/ui/src/components/Tooltip.tsx
index 1607beb7e..ade06a34d 100644
--- a/packages/ui/src/components/Tooltip.tsx
+++ b/packages/ui/src/components/Tooltip.tsx
@@ -1,11 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   ColorValue,
   StyleProp,
@@ -14,6 +7,9 @@ import {
   ViewStyle,
 } from "react-native";
 
+const TRIANGLE_SIZE = 16;
+const TRIANGLE_OFFSET = 15; // TODO: relate this to TRIANGLE_SIZE as styles change e.g TRIANGLE_SIZE - CONTAINER_BORDER
+
 const styles = StyleSheet.create({
   triangle: {
     position: "absolute",
@@ -21,9 +17,9 @@ const styles = StyleSheet.create({
     height: 0,
     backgroundColor: "transparent",
     borderStyle: "solid",
-    borderLeftWidth: 8,
-    borderRightWidth: 8,
-    borderBottomWidth: 16,
+    borderLeftWidth: TRIANGLE_SIZE / 2,
+    borderRightWidth: TRIANGLE_SIZE / 2,
+    borderBottomWidth: TRIANGLE_SIZE,
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
     borderBottomColor: "white",
@@ -85,12 +81,10 @@ export type TooltipPosition =
   | "inset-bottom-left"
   | "inset-bottom-right"
   | "inset-top-left"
-  | "inset-top-right"
-  | "cursor";
+  | "inset-top-right";
 
 export type TooltipProps = {
   placement?: TooltipPosition;
-  stayOnScreen?: boolean;
   show: boolean;
   anchorRef: React.MutableRefObject<View | null>;
   children: React.ReactNode;
@@ -109,38 +103,44 @@ const getPositions = ({
     case "top":
       return {
         tooltipPosition: {
-          top: -tooltip.height - 16,
-          left: anchor.width / 2 - tooltip.width / 2,
+          top: -tooltip.height - TRIANGLE_SIZE,
+          left: (anchor.width - tooltip.width) / 2,
         },
         trianglePosition: {
           top: tooltip.height - 1,
-          left: tooltip.width / 2 - 7.5,
+          left: (tooltip.width - TRIANGLE_OFFSET) / 2,
         },
       };
     case "right":
       return {
         tooltipPosition: {
-          top: anchor.height / 2 - tooltip.height / 2,
-          left: anchor.width + 15,
+          top: (anchor.height - tooltip.height) / 2,
+          left: anchor.width + TRIANGLE_OFFSET,
+        },
+        trianglePosition: {
+          top: (tooltip.height - TRIANGLE_OFFSET) / 2,
+          left: -TRIANGLE_OFFSET,
         },
-        trianglePosition: { top: tooltip.height / 2 - 7.5, left: -15 },
       };
     case "bottom":
       return {
         tooltipPosition: {
-          top: anchor.height + 15,
-          left: anchor.width / 2 - tooltip.width / 2,
+          top: anchor.height + TRIANGLE_OFFSET,
+          left: (anchor.width - tooltip.width) / 2,
+        },
+        trianglePosition: {
+          top: -TRIANGLE_OFFSET,
+          left: (tooltip.width - TRIANGLE_OFFSET) / 2,
         },
-        trianglePosition: { top: -15, left: tooltip.width / 2 - 7.5 },
       };
     case "left":
       return {
         tooltipPosition: {
-          top: anchor.height / 2 - tooltip.height / 2,
-          left: -tooltip.width - 16,
+          top: (anchor.height - tooltip.height) / 2,
+          left: -tooltip.width - TRIANGLE_SIZE,
         },
         trianglePosition: {
-          top: tooltip.height / 2 - 7.5,
+          top: (tooltip.height - TRIANGLE_OFFSET) / 2,
           left: tooltip.width - 1,
         },
       };
@@ -189,13 +189,8 @@ type UIPosition = {
 };
 
 type TooltipState = {
-  tooltipPosition?: UIPosition;
-  trianglePosition?: UIPosition;
-};
-
-type Position = {
-  x: number;
-  y: number;
+  tooltipPosition: UIPosition;
+  trianglePosition: UIPosition;
 };
 
 type Size = {
@@ -203,43 +198,18 @@ type Size = {
   height: number;
 };
 
-export default (props: TooltipProps) => {
+export default React.memo(function Tooltip(props: TooltipProps) {
   const { placement = "top", show, anchorRef, children } = props;
 
   const tooltipRef = useRef<View | null>(null);
   const containerRef = useRef<View | null>(null);
 
-  const [{ tooltipPosition, trianglePosition }, dispatch] = useReducer(
-    (
-      state: TooltipState,
-      { type, payload }: { type: string; payload: any },
-    ) => {
-      if (type === "init") {
-        return { ...getPositions(payload) };
-      }
-      if (type === "move") {
-        return {
-          tooltipPosition: { ...payload },
-        };
-      }
-      return state;
-    },
-    {},
-  );
-
-  const [containerPosition, setContainerPosition] = useState<Position | null>(
-    null,
-  );
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.measure((x, y, width, height, pageX, pageY) => {
-        setContainerPosition({
-          x: pageX,
-          y: pageY,
-        });
-      });
-    }
-  }, [containerRef]);
+  const initState: TooltipState = {
+    tooltipPosition: {},
+    trianglePosition: {},
+  };
+  const [{ tooltipPosition, trianglePosition }, setPosition] =
+    useState(initState);
 
   const [anchorMeasure, setAnchorMeasure] = useState<Size | null>(null);
   useEffect(() => {
@@ -256,42 +226,17 @@ export default (props: TooltipProps) => {
   useEffect(() => {
     if (anchorMeasure?.width && tooltipRef.current) {
       tooltipRef.current.measure((x, y, width, height) => {
-        dispatch({
-          type: "init",
-          payload: {
+        setPosition(
+          getPositions({
             placement,
             anchor: anchorMeasure,
             tooltip: { width, height },
-          },
-        });
+          }),
+        );
       });
     }
   }, [anchorMeasure, show, placement]);
 
-  const trackCursor = useCallback(
-    (e: React.MouseEvent) => {
-      if (!containerPosition) return;
-      dispatch({
-        type: "move",
-        payload: {
-          top: e.clientY - containerPosition.y,
-          left: e.clientX - containerPosition.x,
-        },
-      });
-    },
-    [containerPosition],
-  );
-
-  const mouseEvents = useMemo(
-    () =>
-      placement === "cursor"
-        ? {
-            onMouseMove: trackCursor,
-          }
-        : {},
-    [placement, trackCursor],
-  );
-
   // TODO: a "stay-on-screen" effect
   // TODO: potentially use composition instead of anchorRef
   // =====] how do you do this without affecting the child's original context?
@@ -299,18 +244,16 @@ export default (props: TooltipProps) => {
 
   // embedded views to pick up the "cursor" event
   return (
-    <View ref={containerRef} style={styles.container} {...mouseEvents}>
+    <View ref={containerRef} style={styles.container}>
       <View
         ref={tooltipRef}
         style={StyleSheet.flatten([
-          (!show || (placement === "cursor" && !tooltipPosition.left)) && {
-            visibility: "hidden",
+          !show && {
+            display: "none",
           },
           {
             position:
-              placement.indexOf("inset") === 0 || placement === "cursor"
-                ? "absolute"
-                : "relative",
+              placement.indexOf("inset") === 0 ? "absolute" : "relative",
             width: placement === "overlay" ? "100%" : "fit-content",
             height: placement === "overlay" ? "100%" : "fit-content",
             ...tooltipPosition,
@@ -329,4 +272,4 @@ export default (props: TooltipProps) => {
       </View>
     </View>
   );
-};
+});