Disable tooltip auto-positioning when not visible (viamrobotics#505)

micheal-parks · Apr 12, 2024 · 850a544 · 850a544
1 parent 2e3b13b
commit 850a544
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 32 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.104",
+  "version": "0.0.105",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/tooltip/tooltip-styles.ts b/packages/core/src/lib/tooltip/tooltip-styles.ts
@@ -1,29 +1,19 @@
 import { setContext, getContext } from 'svelte';
 import { derived, writable, type Readable } from 'svelte/store';
 
-import {
-  floatingStyle,
-  type FloatingStyle,
-  type FloatingPlacement,
-} from '$lib/floating';
+import { floatingStyle, type FloatingStyleStore } from '$lib/floating';
 import { uniqueId } from '$lib/unique-id';
 import { noop } from 'lodash-es';
 
 export type TooltipVisibility = 'invisible' | 'visible';
 
 export interface TooltipContext {
   id: string;
-  style: Readable<FloatingStyle | undefined>;
+  style: FloatingStyleStore;
   isVisible: Readable<boolean>;
   setHovered: (isHovered: boolean) => void;
   setVisibility: (visibility: TooltipVisibility | undefined) => void;
   setHoverDelayMS: (hoverDelayMS: number) => void;
-  setTarget: (target: HTMLElement | undefined) => void;
-  setTooltip: (options: {
-    tooltip: HTMLElement | undefined;
-    arrow: HTMLElement | undefined;
-    placement: FloatingPlacement;
-  }) => void;
 }
 
 export interface TooltipElements {
@@ -86,11 +76,12 @@ const createContext = (): TooltipContext => {
     },
     false
   );
+
   const style = floatingStyle({
     offset: 7,
     shift: { padding: 5 },
     flip: { fallbackAxisSideDirection: 'start', crossAxis: false },
-    auto: true,
+    auto: false,
   });
 
   return {
@@ -100,13 +91,5 @@ const createContext = (): TooltipContext => {
     setHovered: isHovered.set,
     setVisibility: visibility.set,
     setHoverDelayMS: hoverDelayMS.set,
-    setTarget: (target) => style.register({ referenceElement: target }),
-    setTooltip: ({ tooltip, arrow, placement }) => {
-      style.register({
-        placement,
-        floatingElement: tooltip,
-        arrowElement: arrow,
-      });
-    },
   };
 };
diff --git a/packages/core/src/lib/tooltip/tooltip-target.svelte b/packages/core/src/lib/tooltip/tooltip-target.svelte
@@ -13,17 +13,17 @@
 <script lang="ts">
 import { useTooltip } from './tooltip-styles';
 
-const { setTarget, setHovered } = useTooltip();
+const { style, setHovered } = useTooltip();
 const hover = () => setHovered(true);
 const unhover = () => setHovered(false);
-let target: HTMLElement | undefined;
+let referenceElement: HTMLElement | undefined;
 
-$: setTarget(target);
+$: style.register({ referenceElement });
 </script>
 
 <span
   role="presentation"
-  bind:this={target}
+  bind:this={referenceElement}
   on:mouseenter={hover}
   on:mouseleave={unhover}
   on:focusin={hover}

diff --git a/packages/core/src/lib/tooltip/tooltip-text.svelte b/packages/core/src/lib/tooltip/tooltip-text.svelte
@@ -22,16 +22,21 @@ export let state: TooltipVisibility | undefined = undefined;
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
 
-const { id, style, isVisible, setVisibility, setTooltip } = useTooltip();
-let tooltip: HTMLElement | undefined;
-let arrow: HTMLElement | undefined;
+const { id, style, isVisible, setVisibility } = useTooltip();
+let floatingElement: HTMLElement | undefined;
+let arrowElement: HTMLElement | undefined;
 
 $: setVisibility(state);
-$: setTooltip({ tooltip, arrow, placement: location });
+$: style.register({
+  floatingElement,
+  arrowElement,
+  placement: location,
+  auto: $isVisible,
+});
 </script>
 
 <div
-  bind:this={tooltip}
+  bind:this={floatingElement}
   {id}
   role="tooltip"
   class:invisible={!$isVisible || !$style}
@@ -43,7 +48,7 @@ $: setTooltip({ tooltip, arrow, placement: location });
   )}
 >
   <div
-    bind:this={arrow}
+    bind:this={arrowElement}
     class="absolute h-[8.5px] w-[8.5px] rotate-45 bg-gray-9"
     style:top={$style?.arrow?.top}
     style:left={$style?.arrow?.left}