HintTooltip

src/packages/hint/hintTooltip.ts

@@ -0,0 +1,37 @@
+import { Tooltip, TooltipProps } from "../tooltip/tooltip";
+import van from "../dom/van";
+
+const { a } = van.tags;
+
+export type HintTooltipProps = Omit<TooltipProps, "hintMode"> & {
+  closeButtonEnabled: boolean;
+  closeButtonOnClick: () => void;
+  closeButtonLabel: string;
+  closeButtonClassName: string;
+};
+
+export const HintTooltip = ({
+  closeButtonEnabled,
+  closeButtonOnClick,
+  closeButtonLabel,
+  closeButtonClassName,
+  ...props
+}: HintTooltipProps) => {
+  return Tooltip(
+    {
+      ...props,
+      hintMode: true,
+    },
+    [
+      closeButtonEnabled ?
+        a(
+          {
+            className: closeButtonClassName,
+            role: "button",
+            onclick: closeButtonOnClick,
+          },
+          closeButtonLabel
+        ) : null,
+    ]
+  );
+};

src/packages/hint/tooltip.ts

@@ -11,8 +11,8 @@ import { setClass } from "../../util/className";
 import { hideHint } from "./hide";
 import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
 import DOMEvent from "../../util/DOMEvent";
-import { Tooltip } from "../tooltip/tooltip";
 import getOffset from "../../util/getOffset";
+import { HintTooltip } from "./hintTooltip";
 
 // The hint close function used when the user clicks outside the hint
 let _hintCloseFunction: () => void | undefined;
@@ -89,13 +89,12 @@ export async function showHintDialog(hint: Hint, stepId: number) {
 
   if (!hintItem) return;
 
-  const tooltipLayer = Tooltip({
+  const tooltipLayer = HintTooltip({
     position: hintItem.position,
     text: item.hint || "",
     targetOffset: getOffset(hintItem.element as HTMLElement),
     // hints don't have step numbers
     showStepNumbers: false,
-    hintMode: true,
 
     autoPosition: hint.getOption("autoPosition"),
     positionPrecedence: hint.getOption("positionPrecedence"),

src/packages/tooltip/tooltip.ts

@@ -1,14 +1,14 @@
 import getOffset, { Offset } from "../../util/getOffset";
 import getWindowSize from "../../util/getWindowSize";
-import van, { State } from "../dom/van";
+import van, { ChildDom, State } from "../dom/van";
 import {
   arrowClassName,
   tooltipClassName,
   tooltipTextClassName,
 } from "../tour/classNames";
 import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
 
-const { div, p, a } = van.tags;
+const { div, p } = van.tags;
 
 export const TooltipArrow = (props: {
   tooltipPosition: State<TooltipPosition>;
@@ -300,7 +300,7 @@ const alignTooltip = (
   }
 };
 
-type TooltipProps = {
+export type TooltipProps = {
   position: TooltipPosition;
   text: string;
   targetOffset: Offset;
@@ -310,29 +310,22 @@ type TooltipProps = {
   // auto-alignment properties
   autoPosition: boolean;
   positionPrecedence: TooltipPosition[];
-
-  closeButtonEnabled: boolean;
-  closeButtonOnClick: () => void;
-  closeButtonLabel: string;
-  closeButtonClassName: string;
 };
 
-export const Tooltip = ({
-  position: initialPosition,
-  text,
-  targetOffset,
-  hintMode = false,
-  showStepNumbers = false,
-
-  // auto-alignment properties
-  autoPosition = true,
-  positionPrecedence = [],
-
-  closeButtonEnabled,
-  closeButtonOnClick,
-  closeButtonLabel,
-  closeButtonClassName,
-}: TooltipProps) => {
+export const Tooltip = (
+  {
+    position: initialPosition,
+    text,
+    targetOffset,
+    hintMode = false,
+    showStepNumbers = false,
+
+    // auto-alignment properties
+    autoPosition = true,
+    positionPrecedence = [],
+  }: TooltipProps,
+  children?: ChildDom[]
+) => {
   const position = van.state<TooltipPosition>(initialPosition);
   const top = van.state<string>("auto");
   const right = van.state<string>("auto");
@@ -404,18 +397,7 @@ export const Tooltip = ({
         tooltipPosition: position,
         tooltipBottomOverflow: tooltipBottomOverflow,
       }),
-      div({ className: tooltipTextClassName }, [
-        p(text),
-        closeButtonEnabled ??
-          a(
-            {
-              className: closeButtonClassName,
-              role: "button",
-              onclick: closeButtonOnClick,
-            },
-            closeButtonLabel
-          ),
-      ]),
+      div({ className: tooltipTextClassName }, [p(text), children]),
     ]
   );