tourTooltip

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

Hide file tree

Showing 3 changed files with 460 additions and 14 deletions.
diff --git a/src/packages/hint/hintTooltip.ts b/src/packages/hint/hintTooltip.ts
@@ -1,16 +1,19 @@
 import { Tooltip, TooltipProps } from "../tooltip/tooltip";
 import van from "../dom/van";
+import { tooltipTextClassName } from "./className";
 
-const { a } = van.tags;
+const { a, p, div } = van.tags;
 
 export type HintTooltipProps = Omit<TooltipProps, "hintMode"> & {
+  text: string;
   closeButtonEnabled: boolean;
   closeButtonOnClick: () => void;
   closeButtonLabel: string;
   closeButtonClassName: string;
 };
 
 export const HintTooltip = ({
+  text,
   closeButtonEnabled,
   closeButtonOnClick,
   closeButtonLabel,
@@ -23,15 +26,17 @@ export const HintTooltip = ({
       hintMode: true,
     },
     [
-      closeButtonEnabled ?
-        a(
-          {
-            className: closeButtonClassName,
-            role: "button",
-            onclick: closeButtonOnClick,
-          },
-          closeButtonLabel
-        ) : null,
+      div({ className: tooltipTextClassName }, p(text)),
+      closeButtonEnabled
+        ? a(
+            {
+              className: closeButtonClassName,
+              role: "button",
+              onclick: closeButtonOnClick,
+            },
+            closeButtonLabel
+          )
+        : null,
     ]
   );
 };
diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
@@ -8,7 +8,7 @@ import {
 } from "../tour/classNames";
 import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
 
-const { div, p } = van.tags;
+const { div } = van.tags;
 
 export const TooltipArrow = (props: {
   tooltipPosition: State<TooltipPosition>;
@@ -302,7 +302,6 @@ const alignTooltip = (
 
 export type TooltipProps = {
   position: TooltipPosition;
-  text: string;
   targetOffset: Offset;
   hintMode: boolean;
   showStepNumbers: boolean;
@@ -315,7 +314,6 @@ export type TooltipProps = {
 export const Tooltip = (
   {
     position: initialPosition,
-    text,
     targetOffset,
     hintMode = false,
     showStepNumbers = false,
@@ -397,7 +395,7 @@ export const Tooltip = (
         tooltipPosition: position,
         tooltipBottomOverflow: tooltipBottomOverflow,
       }),
-      div({ className: tooltipTextClassName }, [p(text), children]),
+      [children],
     ]
   );