Merge pull request #2119 from Parvinmh/title_renderAsHtml_parvin

Title render as html

Author: binrysearch

example/html-tooltip/index.html

@@ -75,6 +75,7 @@ <h4>Section Six</h4>
           intro.setOptions({
             steps: [
               {
+                title: '<p>Welcome</p>',
                 element: '#step1',
                 intro: "This is a <b>bold</b> tooltip."
               },

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

@@ -0,0 +1,35 @@
+import { Header } from "./TourTooltip";
+
+describe("Header", () => {
+  it("renders plain text title when renderAsHtml is false", () => {
+    const el = Header({
+      title: "<strong>Bold Text</strong>",
+      skipLabel: "Skip",
+      renderAsHtml: false,
+      onSkipClick: jest.fn(),
+    });
+
+    const h1 = el.querySelector("h1")!;
+
+    expect(h1.innerHTML).toBe(
+      '<div class="introjs-tooltiptext">&lt;strong&gt;Bold Text&lt;/strong&gt;'
+    );
+    expect(h1.querySelector("strong")).toBeNull();
+  });
+
+  it("renders HTML title when renderAsHtml is true", () => {
+    const el = Header({
+      title: "<strong>Bold Text</strong>",
+      skipLabel: "Skip",
+      renderAsHtml: true,
+      onSkipClick: jest.fn(),
+    });
+
+    const h1 = el.querySelector("h1")!;
+
+    expect(h1.innerHTML).toBe(
+      '<div class="introjs-tooltiptext"><strong>Bold Text</strong>'
+    );
+    expect(h1.querySelector("strong")?.textContent).toBe("Bold Text");
+  });
+});

src/packages/tour/components/TourTooltip.ts

@@ -326,19 +326,24 @@ const Buttons = ({
   );
 };
 
-const Header = ({
+export const Header = ({
   title,
-
   skipLabel,
+  renderAsHtml,
   onSkipClick,
 }: {
   title: string;
-
   skipLabel: string;
+  renderAsHtml?: boolean;
   onSkipClick: (e: any) => void;
 }) => {
+  const titleEl = TooltipContent({
+    text: title,
+    tooltipRenderAsHtml: renderAsHtml,
+    className: tooltipTextClassName,
+  });
   return div({ className: tooltipHeaderClassName }, [
-    h1({ className: tooltipTitleClassName }, title),
+    h1({ className: tooltipTitleClassName }, titleEl),
     Button({
       className: skipButtonClassName,
       label: skipLabel,
@@ -452,7 +457,7 @@ export const TourTooltip = ({
   const text = step.intro;
   const position = step.position;
 
-  children.push(Header({ title, skipLabel, onSkipClick }));
+  children.push(Header({ title, skipLabel, renderAsHtml, onSkipClick }));
 
   children.push(
     TooltipContent({