Fix Tour title classname and update TooltipContent

Author: binrysearch

src/packages/hint/components/HintTooltip.ts

@@ -54,7 +54,7 @@ export const HintTooltip = ({
         TooltipContent({
           text: text || "",
           tooltipRenderAsHtml: renderAsHtml,
-          className: tooltipTextClassName,
+          container: div({ className: tooltipTextClassName }),
         }),
         closeButtonEnabled
           ? a(

src/packages/tooltip/tooltipContent.test.ts

@@ -1,11 +1,14 @@
+import dom from "../dom";
 import { TooltipContent } from "./tooltipContent";
 
+const { div } = dom.tags;
+
 describe("TooltipContent", () => {
   it("renders plain text when tooltipRenderAsHtml is false", () => {
     const el = TooltipContent({
       text: "<strong>Bold Text</strong>",
       tooltipRenderAsHtml: false,
-      className: "tooltip-text",
+      container: div(),
     });
 
     expect(el.innerHTML).toBe("&lt;strong&gt;Bold Text&lt;/strong&gt;");
@@ -16,7 +19,7 @@ describe("TooltipContent", () => {
     const el = TooltipContent({
       text: "<strong>Bold Text</strong>",
       tooltipRenderAsHtml: true,
-      className: "tooltip-text",
+      container: div(),
     });
 
     expect(el.innerHTML).toBe("<strong>Bold Text</strong>");
@@ -26,7 +29,7 @@ describe("TooltipContent", () => {
   it("applies a custom class when provided", () => {
     const el = TooltipContent({
       text: "Custom class test",
-      className: "my-custom-tooltip",
+      container: div({ className: "my-custom-tooltip" }),
     });
 
     expect(el.className).toBe("my-custom-tooltip");

src/packages/tooltip/tooltipContent.ts

@@ -1,22 +1,29 @@
 import dom from "../dom";
 
-const { div } = dom.tags;
-
-export type tooltipContentProps = {
+export type TooltipContentProps = {
+  /**
+   * The text content to be displayed in the tooltip.
+   */
   text: string;
-  className: string;
+  /**
+   * The container element where the tooltip content will be rendered.
+   */
+  container: HTMLElement;
+  /**
+   * If true, the text will be rendered as HTML.
+   */
   tooltipRenderAsHtml?: boolean;
 };
 
+/**
+ * TooltipContent component renders the content of a tooltip.
+ * It can render plain text or HTML based on the `tooltipRenderAsHtml` flag.
+ */
 export const TooltipContent = ({
   text,
+  container,
   tooltipRenderAsHtml,
-  className,
-}: tooltipContentProps) => {
-  const container = div({
-    className,
-  });
-
+}: TooltipContentProps) => {
   dom.derive(() => {
     const el = container as HTMLElement;
     if (!el) return;

src/packages/tour/components/TourTooltip.test.ts

@@ -11,9 +11,7 @@ describe("Header", () => {
 
     const h1 = el.querySelector("h1")!;
 
-    expect(h1.innerHTML).toBe(
-      '<div class="introjs-tooltiptext">&lt;strong&gt;Bold Text&lt;/strong&gt;'
-    );
+    expect(h1.innerHTML).toBe("&lt;strong&gt;Bold Text&lt;/strong&gt;");
     expect(h1.querySelector("strong")).toBeNull();
   });
 
@@ -27,9 +25,7 @@ describe("Header", () => {
 
     const h1 = el.querySelector("h1")!;
 
-    expect(h1.innerHTML).toBe(
-      '<div class="introjs-tooltiptext"><strong>Bold Text</strong>'
-    );
+    expect(h1.innerHTML).toBe("<strong>Bold Text</strong>");
     expect(h1.querySelector("strong")?.textContent).toBe("Bold Text");
   });
 });

src/packages/tour/components/TourTooltip.ts

@@ -340,10 +340,10 @@ export const Header = ({
   const titleEl = TooltipContent({
     text: title,
     tooltipRenderAsHtml: renderAsHtml,
-    className: tooltipTextClassName,
+    container: h1({ className: tooltipTitleClassName }),
   });
   return div({ className: tooltipHeaderClassName }, [
-    h1({ className: tooltipTitleClassName }, titleEl),
+    titleEl,
     Button({
       className: skipButtonClassName,
       label: skipLabel,
@@ -463,7 +463,7 @@ export const TourTooltip = ({
     TooltipContent({
       text,
       tooltipRenderAsHtml: renderAsHtml,
-      className: tooltipTextClassName,
+      container: div({ className: tooltipTextClassName }),
     })
   );