[design-system] Move tooltip to the left if it lacks space from the r…

…ight (#124) * Move tooltip to the left if it lacks space from right * Updated `TooltipTrigger` logic to change its position regardless `maxWidth` * bump version to 4.2.0 Co-authored-by: Jen Overgaag <[email protected]>
Recidiviz · Dec 14, 2022 · b2671ee · b2671ee
1 parent fe0d553
commit b2671ee
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@recidiviz/design-system",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "UI components and styles for Recidiviz web products.",
   "author": "Recidiviz <[email protected]>",
   "license": "GPL-3.0-only",

diff --git a/packages/design-system/src/components/Tooltip/TooltipTrigger.tsx b/packages/design-system/src/components/Tooltip/TooltipTrigger.tsx
@@ -65,6 +65,7 @@ export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
   const [offset, setOffset] = React.useState({ top: "0px", left: "0px" });
   // Event handlers should not be
   const [showTooltip, setShowTooltip] = useTooltipState(contents);
+  const tooltipRef = React.useRef<HTMLDivElement>(null);
 
   const transitions = useTransition(showTooltip, {
     from: { opacity: 0 },
@@ -80,20 +81,44 @@ export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
   });
 
   let frame: number;
+  const pointerOffset = 15;
   const updateTooltipPosition = (x: number, y: number) => {
     if (typeof frame !== "undefined") {
       window.cancelAnimationFrame(frame);
     }
+
+    let offsetLeft = x;
+    let offsetWidth = 0;
+
+    if (tooltipRef.current) {
+      offsetWidth = tooltipRef.current.offsetWidth;
+
+      if (maxWidth) offsetWidth = maxWidth;
+      if (offsetWidth > 300) offsetWidth = 300;
+    }
+
+    // if tooltip doesn't have enough space on the right move it to the left relative to pointer.
+    if (
+      offsetWidth &&
+      window.innerWidth - x < offsetWidth &&
+      x - offsetWidth > pointerOffset
+    ) {
+      offsetLeft = x - offsetWidth - (pointerOffset + 5);
+    }
+
     frame = window.requestAnimationFrame(() => {
       setOffset({
-        left: `${x}px`,
+        left: `${offsetLeft}px`,
         top: `${y}px`,
       });
     });
   };
 
   const onMouseMove: React.MouseEventHandler<HTMLDivElement> = (event) => {
-    updateTooltipPosition(event.clientX + 15, event.clientY + 15);
+    updateTooltipPosition(
+      event.clientX + pointerOffset,
+      event.clientY + pointerOffset
+    );
   };
 
   const onMouseEnter = () => {
@@ -108,7 +133,7 @@ export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
     // if someone clicked on a hovered item don't override mouse position
     if (!showTooltip) {
       const bounds = event.target.getBoundingClientRect();
-      updateTooltipPosition(bounds.right + 15, bounds.top);
+      updateTooltipPosition(bounds.right + pointerOffset, bounds.top);
     }
     setShowTooltip(true);
   };
@@ -120,6 +145,7 @@ export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
           (styles, item) =>
             item && (
               <AnimatedTooltip
+                ref={tooltipRef}
                 maxWidth={maxWidth}
                 style={{ ...styles, top: offset.top, left: offset.left }}
               >