hint position

src/packages/hint/components/HintIcon.ts

@@ -2,6 +2,7 @@ import isFixed from "../../../util/isFixed";
 import van from "../../dom/van";
 import {
   fixedHintClassName,
+  hideHintClassName,
   hintClassName,
   hintDotClassName,
   hintNoAnimationClassName,
@@ -30,6 +31,10 @@ const className = (hintItem: HintItem) => {
     classNames.push(fixedHintClassName);
   }
 
+  if (!hintItem.isActive?.val) {
+    classNames.push(hideHintClassName);
+  }
+
   return classNames.join(" ");
 };
 
@@ -40,7 +45,7 @@ export const HintIcon = ({ index, hintItem, onClick }: HintProps) => {
   const hintElement = a(
     {
       [dataStepAttribute]: index.toString(),
-      className: className(hintItem),
+      className: () => className(hintItem),
       role: "button",
       tabindex: 0,
       onclick: onClick,

src/packages/hint/components/HintTooltip.ts

@@ -5,16 +5,19 @@ import { HintItem } from "../hintItem";
 
 const { a, p, div } = van.tags;
 
-export type HintTooltipProps = Omit<TooltipProps, "hintMode"> & {
-  text: string;
+export type HintTooltipProps = Omit<
+  TooltipProps,
+  "hintMode" | "element" | "position"
+> & {
+  hintItem: HintItem;
   closeButtonEnabled: boolean;
-  closeButtonOnClick: () => void;
+  closeButtonOnClick: (hintItem: HintItem) => void;
   closeButtonLabel: string;
   closeButtonClassName: string;
 };
 
 export const HintTooltip = ({
-  text,
+  hintItem,
   closeButtonEnabled,
   closeButtonOnClick,
   closeButtonLabel,
@@ -24,18 +27,20 @@ export const HintTooltip = ({
   return Tooltip(
     {
       ...props,
+      element: hintItem.hintTooltipElement as HTMLElement,
+      position: hintItem.position,
       hintMode: true,
     },
     [
       div(
         { className: tooltipTextClassName },
-        p(text),
+        p(hintItem.hint || ""),
         closeButtonEnabled
           ? a(
               {
                 className: closeButtonClassName,
                 role: "button",
-                onclick: closeButtonOnClick,
+                onclick: () => closeButtonOnClick(hintItem),
               },
               closeButtonLabel
             )

src/packages/hint/components/HintsRoot.ts

@@ -2,6 +2,7 @@ import van from "../../dom/van";
 import { hintsClassName } from "../className";
 import { hideHint } from "../hide";
 import { Hint } from "../hint";
+import { HintItem } from "../hintItem";
 import { showHintDialog } from "../tooltip";
 import { HintIcon } from "./HintIcon";
 import { ReferenceLayer } from "./ReferenceLayer";
@@ -33,13 +34,17 @@ export const HintsRoot = ({ hint }: HintsRootProps) => {
   const hintElements = [];
 
   for (const [i, hintItem] of hint.getHints().entries()) {
-    hintElements.push(
-      HintIcon({
-        index: i,
-        hintItem,
-        onClick: getHintClick(hint, i),
-      })
-    );
+    const hintTooltipElement = HintIcon({
+      index: i,
+      hintItem,
+      onClick: getHintClick(hint, i),
+    });
+
+    // store the hint tooltip element in the hint item
+    // because we need to position the reference layer relative to the HintIcon
+    hintItem.hintTooltipElement = hintTooltipElement;
+
+    hintElements.push(hintTooltipElement);
   }
 
   const root = div(
@@ -58,9 +63,7 @@ export const HintsRoot = ({ hint }: HintsRootProps) => {
 
     const referenceLayer = ReferenceLayer({
       activeHintSignal: hint._activeHintSignal,
-      text: hintItem.hint || "",
-      element: hintItem.element as HTMLElement,
-      position: hintItem.position,
+      hintItem,
 
       helperElementPadding: hint.getOption("helperElementPadding"),
       targetElement: hint.getTargetElement(),
@@ -76,7 +79,7 @@ export const HintsRoot = ({ hint }: HintsRootProps) => {
       closeButtonEnabled: hint.getOption("hintShowButton"),
       closeButtonLabel: hint.getOption("hintButtonLabel"),
       closeButtonClassName: hint.getOption("buttonClass"),
-      closeButtonOnClick: () => hideHint(hint, stepId),
+      closeButtonOnClick: (hintItem: HintItem) => hideHint(hint, hintItem),
     });
 
     van.add(root, referenceLayer);

src/packages/hint/components/ReferenceLayer.ts

@@ -21,11 +21,17 @@ export const ReferenceLayer = ({
   helperElementPadding,
   ...props
 }: ReferenceLayerProps) => {
+  const initialActiveHintSignal = activeHintSignal.val;
+
   return () => {
     // remove the reference layer if the active hint signal is set to undefined
     // e.g. when the user clicks outside the hint
     if (activeHintSignal.val == undefined) return null;
 
+    // remove the reference layer if the active hint signal changes
+    // and the initial active hint signal is not same as the current active hint signal (e.g. when the user clicks on another hint)
+    if (initialActiveHintSignal !== activeHintSignal.val) return null;
+
     const referenceLayer = div(
       {
         [dataStepAttribute]: activeHintSignal.val,
@@ -38,7 +44,7 @@ export const ReferenceLayer = ({
       setPositionRelativeTo(
         targetElement,
         referenceLayer,
-        props.element as HTMLElement,
+        props.hintItem.hintTooltipElement as HTMLElement,
         helperElementPadding
       );
     }, 1);

src/packages/hint/hide.ts

@@ -4,23 +4,21 @@ import { addClass } from "../../util/className";
 import { removeHintTooltip } from "./tooltip";
 import { dataStepAttribute } from "./dataAttributes";
 import { hintElement, hintElements } from "./selector";
+import { HintItem } from "./hintItem";
 
 /**
  * Hide a hint
  *
  * @api private
  */
-export async function hideHint(hint: Hint, stepId: number) {
-  const element = hintElement(stepId);
+export async function hideHint(hint: Hint, hintItem: HintItem) {
+  const isActiveSignal = hintItem.isActive;
 
-  //removeHintTooltip();
-
-  if (element) {
-    addClass(element, hideHintClassName);
+  if (isActiveSignal) {
+    isActiveSignal.val = false;
   }
-
   // call the callback function (if any)
-  hint.callback("hintClose")?.call(hint, stepId);
+  hint.callback("hintClose")?.call(hint, hintItem);
 }
 
 /**
@@ -29,13 +27,7 @@ export async function hideHint(hint: Hint, stepId: number) {
  * @api private
  */
 export async function hideHints(hint: Hint) {
-  const elements = hintElements();
-
-  for (const hintElement of Array.from(elements)) {
-    const step = hintElement.getAttribute(dataStepAttribute);
-
-    if (!step) continue;
-
-    await hideHint(hint, parseInt(step, 10));
+  for (const hintItem of hint.getHints()) {
+    await hideHint(hint, hintItem);
   }
 }

src/packages/hint/hint.ts

@@ -16,15 +16,11 @@ import van from "../dom/van";
 import { HintsRoot } from "./components/HintsRoot";
 
 type hintsAddedCallback = (this: Hint) => void | Promise<void>;
-type hintClickCallback = (
-  this: Hint,
-  hintElement: HTMLElement,
-  item: HintItem,
-  stepId: number
-) => void | Promise<void>;
-type hintCloseCallback = (this: Hint, stepId: number) => void | Promise<void>;
+type hintClickCallback = (this: Hint, item: HintItem) => void | Promise<void>;
+type hintCloseCallback = (this: Hint, item: HintItem) => void | Promise<void>;
 
 export class Hint implements Package<HintOptions> {
+  private _root: HTMLElement | undefined;
   private _hints: HintItem[] = [];
   private readonly _targetElement: HTMLElement;
   private _options: HintOptions;
@@ -105,12 +101,19 @@ export class Hint implements Package<HintOptions> {
    * @param hint The Hint item
    */
   addHint(hint: HintItem): this {
+    // always set isActive to true
+    hint.isActive = van.state(true);
     this._hints.push(hint);
     return this;
   }
 
+  public isRendered() {
+    return this._root !== undefined;
+  }
+
   private createRoot() {
-    van.add(this._targetElement, HintsRoot({ hint: this }));
+    this._root = HintsRoot({ hint: this });
+    van.add(this._targetElement, this._root);
   }
 
   /**
@@ -139,7 +142,12 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   async hideHint(stepId: number) {
-    await hideHint(this, stepId);
+    const hintItem = this.getHint(stepId);
+
+    if (hintItem) {
+      await hideHint(this, hintItem);
+    }
+
     return this;
   }
 
@@ -156,7 +164,12 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   showHint(stepId: number) {
-    showHint(stepId);
+    const hintItem = this.getHint(stepId);
+
+    if (hintItem) {
+      showHint(hintItem);
+    }
+
     return this;
   }
 
@@ -173,6 +186,10 @@ export class Hint implements Package<HintOptions> {
    * Useful when you want to destroy the elements and add them again (e.g. a modal or popup)
    */
   destroy() {
+    if (this._root) {
+      this._root.remove();
+      this._root = undefined;
+    }
     removeHints(this);
     return this;
   }

src/packages/hint/hintItem.ts

@@ -7,6 +7,7 @@ import {
   dataHintPositionAttribute,
   dataTooltipClassAttribute,
 } from "./dataAttributes";
+import { State } from "../dom/van";
 
 export type HintPosition =
   | "top-left"
@@ -24,9 +25,12 @@ export type HintItem = {
   tooltipClass?: string;
   position: TooltipPosition;
   hint?: string;
-  hintTargetElement?: HTMLElement;
+  // this is the HintIcon element for this particular hint
+  // used for positioning the HintTooltip
+  hintTooltipElement?: HTMLElement;
   hintAnimation?: boolean;
   hintPosition: HintPosition;
+  isActive?: State<boolean>;
 };
 
 export const fetchHintItems = (hint: Hint) => {

src/packages/hint/position.ts

@@ -81,7 +81,7 @@ export const alignHintPosition = (
  * @api private
  */
 export function reAlignHints(hint: Hint) {
-  for (const { hintTargetElement, hintPosition, element } of hint.getHints()) {
-    alignHintPosition(hintPosition, element as HTMLElement, hintTargetElement);
+  for (const { hintTooltipElement, hintPosition, element } of hint.getHints()) {
+    alignHintPosition(hintPosition, element as HTMLElement, hintTooltipElement);
   }
 }

src/packages/hint/render.ts

@@ -15,26 +15,8 @@ import setAnchorAsButton from "../../util/setAnchorAsButton";
 import { addClass } from "../../util/className";
 import isFixed from "../../util/isFixed";
 import { alignHintPosition } from "./position";
-import { showHintDialog } from "./tooltip";
 import { HintsRoot } from "./components/HintsRoot";
 
-/**
- * Returns an event handler unique to the hint iteration
- */
-const getHintClick = (hint: Hint, i: number) => (e: Event) => {
-  const evt = e ? e : window.event;
-
-  if (evt && evt.stopPropagation) {
-    evt.stopPropagation();
-  }
-
-  if (evt && evt.cancelBubble !== null) {
-    evt.cancelBubble = true;
-  }
-
-  showHintDialog(hint, i);
-};
-
 /**
  * Add all available hints to the page
  *

src/packages/hint/show.ts

@@ -1,24 +1,15 @@
 import { Hint } from "./hint";
-import { hideHintClassName } from "./className";
-import { dataStepAttribute } from "./dataAttributes";
-import { removeClass } from "../../util/className";
-import { hintElement, hintElements } from "./selector";
+import { HintItem } from "./hintItem";
 
 /**
  * Show all hints
  *
  * @api private
  */
 export async function showHints(hint: Hint) {
-  const elements = hintElements();
-
-  if (elements?.length) {
-    for (const hintElement of Array.from(elements)) {
-      const step = hintElement.getAttribute(dataStepAttribute);
-
-      if (!step) continue;
-
-      showHint(parseInt(step, 10));
+  if (hint.isRendered()) {
+    for (const hintItem of hint.getHints()) {
+      showHint(hintItem);
     }
   } else {
     // or render hints if there are none
@@ -31,10 +22,10 @@ export async function showHints(hint: Hint) {
  *
  * @api private
  */
-export function showHint(stepId: number) {
-  const element = hintElement(stepId);
+export function showHint(hintItem: HintItem) {
+  const activeSignal = hintItem.isActive;
 
-  if (element) {
-    removeClass(element, new RegExp(hideHintClassName, "g"));
+  if (activeSignal) {
+    activeSignal.val = true;
   }
 }