complete tourTooltip

usablica · Sep 1, 2024 · da7fc24 · da7fc24
1 parent c078182
commit da7fc24
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 454 deletions.
diff --git a/src/packages/hint/tooltip.ts b/src/packages/hint/tooltip.ts
@@ -13,6 +13,7 @@ import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
 import DOMEvent from "../../util/DOMEvent";
 import getOffset from "../../util/getOffset";
 import { HintTooltip } from "./hintTooltip";
+import van from "../dom/van";
 
 // The hint close function used when the user clicks outside the hint
 let _hintCloseFunction: () => void | undefined;
@@ -90,9 +91,9 @@ export async function showHintDialog(hint: Hint, stepId: number) {
   if (!hintItem) return;
 
   const tooltipLayer = HintTooltip({
-    position: hintItem.position,
+    position: van.state(hintItem.position),
     text: item.hint || "",
-    targetOffset: getOffset(hintItem.element as HTMLElement),
+    targetOffset: van.state(getOffset(hintItem.element as HTMLElement)),
     // hints don't have step numbers
     showStepNumbers: false,
 

diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
@@ -4,7 +4,6 @@ import van, { ChildDom, State } from "../dom/van";
 import {
   arrowClassName,
   tooltipClassName,
-  tooltipTextClassName,
 } from "../tour/classNames";
 import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
 
@@ -301,8 +300,8 @@ const alignTooltip = (
 };
 
 export type TooltipProps = {
-  position: TooltipPosition;
-  targetOffset: Offset;
+  position: State<TooltipPosition>;
+  targetOffset: State<Offset>;
   hintMode: boolean;
   showStepNumbers: boolean;
 
@@ -313,7 +312,7 @@ export type TooltipProps = {
 
 export const Tooltip = (
   {
-    position: initialPosition,
+    position,
     targetOffset,
     hintMode = false,
     showStepNumbers = false,
@@ -324,7 +323,6 @@ export const Tooltip = (
   }: TooltipProps,
   children?: ChildDom[]
 ) => {
-  const position = van.state<TooltipPosition>(initialPosition);
   const top = van.state<string>("auto");
   const right = van.state<string>("auto");
   const bottom = van.state<string>("auto");
@@ -337,7 +335,7 @@ export const Tooltip = (
   const tooltipWidth = van.state<number>(300);
   const windowSize = getWindowSize();
   const tooltipBottomOverflow = van.derive(
-    () => targetOffset.top + tooltipHeight.val! > windowSize.height
+    () => targetOffset.val!.top + tooltipHeight.val! > windowSize.height
   );
 
   van.derive(() => {
@@ -350,7 +348,7 @@ export const Tooltip = (
     ) {
       position.val = determineAutoPosition(
         positionPrecedence,
-        targetOffset,
+        targetOffset.val!,
         tooltipWidth.val,
         tooltipHeight.val,
         position.val
@@ -367,7 +365,7 @@ export const Tooltip = (
     ) {
       alignTooltip(
         position.val,
-        targetOffset,
+        targetOffset.val!,
         tooltipWidth.val,
         tooltipHeight.val,
         top,