From b20bcce98943bc1a7a413f4a945670ab11861481 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Mon, 7 Apr 2025 15:33:55 +0300
Subject: [PATCH 01/14] Add htmlRenderEnabled option to Tour for enabling HTML
 rendering in steps

---
 src/packages/hint/option.ts                 |  3 +++
 src/packages/tooltip/tooltip.ts             | 10 +++++++++-
 src/packages/tour/components/TourTooltip.ts |  3 +++
 src/packages/tour/option.ts                 |  3 +++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/packages/hint/option.ts b/src/packages/hint/option.ts
index d64c5eb67..4c4885b10 100644
--- a/src/packages/hint/option.ts
+++ b/src/packages/hint/option.ts
@@ -28,6 +28,8 @@ export interface HintOptions {
   autoPosition: boolean;
   /* Precedence of positions, when auto is enabled */
   positionPrecedence: TooltipPosition[];
+  /* Optional property to determine if content should be rendered as HTML */
+  htmlRenderEnabled?: boolean;
 }
 
 export function getDefaultHintOptions(): HintOptions {
@@ -45,5 +47,6 @@ export function getDefaultHintOptions(): HintOptions {
     helperElementPadding: 10,
     autoPosition: true,
     positionPrecedence: ["bottom", "top", "right", "left"],
+    htmlRenderEnabled: true,
   };
 }
diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
index c7adb9b52..95de42d6b 100644
--- a/src/packages/tooltip/tooltip.ts
+++ b/src/packages/tooltip/tooltip.ts
@@ -315,6 +315,8 @@ export type TooltipProps = {
   autoPosition: boolean;
   positionPrecedence: TooltipPosition[];
 
+  htmlRenderEnabled?: boolean;
+
   onClick?: (e: any) => void;
   className?: string;
 };
@@ -330,9 +332,11 @@ export const Tooltip = (
     transitionDuration = 0,
 
     // auto-alignment properties
-    autoPosition = true,
     positionPrecedence = [],
     className,
+    htmlRenderEnabled = false,
+    autoPosition = false,
+
     onClick,
   }: TooltipProps,
   children?: ChildDom[]
@@ -417,6 +421,10 @@ export const Tooltip = (
     }
   });
 
+  if (htmlRenderEnabled) {
+    // if the content is HTML, we need to set the innerHTML of the tooltip
+  }
+
   const tooltip = div(
     {
       style: () =>
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index a56e15536..90568dfef 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -406,6 +406,7 @@ export type TourTooltipProps = Omit<
   dontShowAgain: boolean;
   dontShowAgainLabel: string;
   onDontShowAgainChange: (checked: boolean) => void;
+  htmlRenderEnabled?: boolean;
 };
 
 export const TourTooltip = ({
@@ -442,6 +443,7 @@ export const TourTooltip = ({
   dontShowAgain,
   onDontShowAgainChange,
   dontShowAgainLabel,
+  htmlRenderEnabled,
   ...props
 }: TourTooltipProps) => {
   const children = [];
@@ -498,6 +500,7 @@ export const TourTooltip = ({
       element: step.element as HTMLElement,
       hintMode: false,
       position,
+      htmlRenderEnabled: false,
     },
     children
   );
diff --git a/src/packages/tour/option.ts b/src/packages/tour/option.ts
index 913212511..0092a0268 100644
--- a/src/packages/tour/option.ts
+++ b/src/packages/tour/option.ts
@@ -72,6 +72,8 @@ export interface TourOptions {
   buttonClass: string;
   /* additional classes to put on progress bar */
   progressBarAdditionalClass: string;
+  /* Optional property to determine if content should be rendered as HTML */
+  htmlRenderEnabled?: boolean;
 }
 
 export function getDefaultTourOptions(): TourOptions {
@@ -113,5 +115,6 @@ export function getDefaultTourOptions(): TourOptions {
 
     buttonClass: "introjs-button",
     progressBarAdditionalClass: "",
+    htmlRenderEnabled: true,
   };
 }

From b479dfe3cf9ff2738625609a9491b2c906d4d0c1 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Wed, 9 Apr 2025 10:18:52 +0300
Subject: [PATCH 02/14] chore: update PR comment

---
 src/packages/tooltip/tooltip.ts             | 7 +++----
 src/packages/tour/components/TourTooltip.ts | 3 ---
 src/packages/tour/option.ts                 | 4 ++--
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
index 95de42d6b..92bd2571a 100644
--- a/src/packages/tooltip/tooltip.ts
+++ b/src/packages/tooltip/tooltip.ts
@@ -315,7 +315,7 @@ export type TooltipProps = {
   autoPosition: boolean;
   positionPrecedence: TooltipPosition[];
 
-  htmlRenderEnabled?: boolean;
+  renderAsHtml?: boolean;
 
   onClick?: (e: any) => void;
   className?: string;
@@ -334,8 +334,7 @@ export const Tooltip = (
     // auto-alignment properties
     positionPrecedence = [],
     className,
-    htmlRenderEnabled = false,
-    autoPosition = false,
+    autoPosition = true,
 
     onClick,
   }: TooltipProps,
@@ -421,7 +420,7 @@ export const Tooltip = (
     }
   });
 
-  if (htmlRenderEnabled) {
+  if (renderAsHtml) {
     // if the content is HTML, we need to set the innerHTML of the tooltip
   }
 
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index 90568dfef..a56e15536 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -406,7 +406,6 @@ export type TourTooltipProps = Omit<
   dontShowAgain: boolean;
   dontShowAgainLabel: string;
   onDontShowAgainChange: (checked: boolean) => void;
-  htmlRenderEnabled?: boolean;
 };
 
 export const TourTooltip = ({
@@ -443,7 +442,6 @@ export const TourTooltip = ({
   dontShowAgain,
   onDontShowAgainChange,
   dontShowAgainLabel,
-  htmlRenderEnabled,
   ...props
 }: TourTooltipProps) => {
   const children = [];
@@ -500,7 +498,6 @@ export const TourTooltip = ({
       element: step.element as HTMLElement,
       hintMode: false,
       position,
-      htmlRenderEnabled: false,
     },
     children
   );
diff --git a/src/packages/tour/option.ts b/src/packages/tour/option.ts
index 0092a0268..f24c904f2 100644
--- a/src/packages/tour/option.ts
+++ b/src/packages/tour/option.ts
@@ -73,7 +73,7 @@ export interface TourOptions {
   /* additional classes to put on progress bar */
   progressBarAdditionalClass: string;
   /* Optional property to determine if content should be rendered as HTML */
-  htmlRenderEnabled?: boolean;
+  tooltipRenderAsHtml?: boolean;
 }
 
 export function getDefaultTourOptions(): TourOptions {
@@ -115,6 +115,6 @@ export function getDefaultTourOptions(): TourOptions {
 
     buttonClass: "introjs-button",
     progressBarAdditionalClass: "",
-    htmlRenderEnabled: true,
+    tooltipRenderAsHtml: true,
   };
 }

From 06be56b64b88f0ad3b9c3c5dcddc4078d981bd15 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Wed, 9 Apr 2025 10:23:57 +0300
Subject: [PATCH 03/14] chore: update PR comment

---
 src/packages/hint/option.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/packages/hint/option.ts b/src/packages/hint/option.ts
index 4c4885b10..0ebc47176 100644
--- a/src/packages/hint/option.ts
+++ b/src/packages/hint/option.ts
@@ -29,7 +29,7 @@ export interface HintOptions {
   /* Precedence of positions, when auto is enabled */
   positionPrecedence: TooltipPosition[];
   /* Optional property to determine if content should be rendered as HTML */
-  htmlRenderEnabled?: boolean;
+  tooltipRenderAsHtml?: boolean;
 }
 
 export function getDefaultHintOptions(): HintOptions {
@@ -47,6 +47,6 @@ export function getDefaultHintOptions(): HintOptions {
     helperElementPadding: 10,
     autoPosition: true,
     positionPrecedence: ["bottom", "top", "right", "left"],
-    htmlRenderEnabled: true,
+    tooltipRenderAsHtml: true,
   };
 }

From 1aef38da794d553f2383d96599e453dd331a6398 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Thu, 10 Apr 2025 11:22:27 +0300
Subject: [PATCH 04/14] feat: add component for rendering HTML in tooltip

---
 example/html-tooltip/index.html             |  3 ++-
 src/packages/tooltip/tooltip.ts             |  4 ---
 src/packages/tooltip/tooltipContent.ts      | 29 +++++++++++++++++++++
 src/packages/tour/components/TourRoot.ts    |  1 +
 src/packages/tour/components/TourTooltip.ts | 11 +++++++-
 5 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 src/packages/tooltip/tooltipContent.ts

diff --git a/example/html-tooltip/index.html b/example/html-tooltip/index.html
index 5c0d6329a..633fa964d 100644
--- a/example/html-tooltip/index.html
+++ b/example/html-tooltip/index.html
@@ -71,8 +71,9 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       function startIntro(){
-        var intro = introJs();
+        var intro = introJs.tour();
           intro.setOptions({
+            tooltipRenderAsHtml: true,
             steps: [
               {
                 element: '#step1',
diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
index 92bd2571a..8e82ec74b 100644
--- a/src/packages/tooltip/tooltip.ts
+++ b/src/packages/tooltip/tooltip.ts
@@ -420,10 +420,6 @@ export const Tooltip = (
     }
   });
 
-  if (renderAsHtml) {
-    // if the content is HTML, we need to set the innerHTML of the tooltip
-  }
-
   const tooltip = div(
     {
       style: () =>
diff --git a/src/packages/tooltip/tooltipContent.ts b/src/packages/tooltip/tooltipContent.ts
new file mode 100644
index 000000000..8434bb511
--- /dev/null
+++ b/src/packages/tooltip/tooltipContent.ts
@@ -0,0 +1,29 @@
+import dom from "../dom";
+
+const { div } = dom.tags;
+
+export type tooltipContentProps = {
+    text: string;
+    tooltipRenderAsHtml: boolean;
+ };
+
+export const tooltipContetnt = ({ text, tooltipRenderAsHtml }: tooltipContentProps) => {
+  const container = div({});
+
+  dom.derive(() => {
+    const el = container as HTMLElement;
+    if (!el) return;
+
+    // Clear existing content
+    el.innerHTML = '';
+
+    if (tooltipRenderAsHtml && text) {
+      const fragment = document.createRange().createContextualFragment(text);
+      el.appendChild(fragment);
+    } else {
+      el.textContent = text;
+    }
+  });
+
+  return container;
+};
diff --git a/src/packages/tour/components/TourRoot.ts b/src/packages/tour/components/TourRoot.ts
index c5414ce8a..0c45d8cfc 100644
--- a/src/packages/tour/components/TourRoot.ts
+++ b/src/packages/tour/components/TourRoot.ts
@@ -145,6 +145,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
           tour.setDontShowAgain(checked);
         },
         dontShowAgainLabel: tour.getOption("dontShowAgainLabel"),
+        renderAsHtml: tour.getOption("tooltipRenderAsHtml"),
       });
 
       const disableInteraction = step.val.disableInteraction
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index a56e15536..1eb0f4f8b 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -23,6 +23,7 @@ import { TourStep } from "../steps";
 import { dataStepNumberAttribute } from "../dataAttributes";
 import scrollParentToElement from "../../../util/scrollParentToElement";
 import scrollTo from "../../../util/scrollTo";
+import { tooltipContetnt } from "../../tooltip/tooltipContent";
 
 const { h1, div, input, label, ul, li, a } = dom.tags;
 
@@ -451,7 +452,15 @@ export const TourTooltip = ({
 
   children.push(Header({ title, skipLabel, onSkipClick }));
 
-  children.push(div({ className: tooltipTextClassName }, text));
+  children.push(
+    div(
+      { className: tooltipTextClassName },
+      tooltipContetnt({
+        text,
+        tooltipRenderAsHtml: props.renderAsHtml ?? false,
+      })
+    )
+  );
 
   if (dontShowAgain) {
     children.push(DontShowAgain({ dontShowAgainLabel, onDontShowAgainChange }));

From a6fa921dc4eeec394fa085b273a0a98cb82cc03c Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Thu, 10 Apr 2025 15:58:30 +0300
Subject: [PATCH 05/14] fix: handle optional renderAsHtml prop in component

---
 example/html-tooltip/index.html             | 1 -
 src/packages/tooltip/tooltipContent.ts      | 2 +-
 src/packages/tour/components/TourTooltip.ts | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/example/html-tooltip/index.html b/example/html-tooltip/index.html
index 633fa964d..dc41f3ea1 100644
--- a/example/html-tooltip/index.html
+++ b/example/html-tooltip/index.html
@@ -73,7 +73,6 @@ <h4>Section Six</h4>
       function startIntro(){
         var intro = introJs.tour();
           intro.setOptions({
-            tooltipRenderAsHtml: true,
             steps: [
               {
                 element: '#step1',
diff --git a/src/packages/tooltip/tooltipContent.ts b/src/packages/tooltip/tooltipContent.ts
index 8434bb511..cbc40893d 100644
--- a/src/packages/tooltip/tooltipContent.ts
+++ b/src/packages/tooltip/tooltipContent.ts
@@ -4,7 +4,7 @@ const { div } = dom.tags;
 
 export type tooltipContentProps = {
     text: string;
-    tooltipRenderAsHtml: boolean;
+    tooltipRenderAsHtml?: boolean;
  };
 
 export const tooltipContetnt = ({ text, tooltipRenderAsHtml }: tooltipContentProps) => {
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index 1eb0f4f8b..5d6fe6b83 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -457,7 +457,7 @@ export const TourTooltip = ({
       { className: tooltipTextClassName },
       tooltipContetnt({
         text,
-        tooltipRenderAsHtml: props.renderAsHtml ?? false,
+        tooltipRenderAsHtml: props.renderAsHtml,
       })
     )
   );

From cea18e41d51b643a6228b388a9a3318cf27e9246 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Fri, 11 Apr 2025 12:06:05 +0300
Subject: [PATCH 06/14] test: write test for tooltiprenderashtml

---
 src/packages/tour/tour.test.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/packages/tour/tour.test.ts b/src/packages/tour/tour.test.ts
index 4a6acfca7..84df4fb22 100644
--- a/src/packages/tour/tour.test.ts
+++ b/src/packages/tour/tour.test.ts
@@ -612,4 +612,32 @@ describe("Tour", () => {
       expect(mockTour.hasStarted()).toBeFalsy();
     });
   });
+
+  test("should have tooltipRenderAsHtml option set as false", async () => {
+    // Arrange
+    const mockTour = getMockTour();
+    mockTour.setOptions({
+      tooltipRenderAsHtml: false,
+    });
+
+    // Act
+    await mockTour.start();
+
+    // Assert
+    expect(mockTour.getOption("tooltipRenderAsHtml")).toBeFalsy();
+  });
+
+  test("should have tooltipRenderAsHtml option set as true", async () => {
+    // Arrange
+    const mockTour = getMockTour();
+    mockTour.setOptions({
+      tooltipRenderAsHtml: true,
+    });
+
+    // Act
+    await mockTour.start();
+
+    // Assert
+    expect(mockTour.getOption("tooltipRenderAsHtml")).toBeTruthy();
+  });
 });

From 8d264287359abdfedfa9295381e07ac7ab5b6075 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Sat, 12 Apr 2025 10:12:25 +0300
Subject: [PATCH 07/14] fix: rename tooltip component and add classname
 property

---
 src/packages/tooltip/tooltipContent.ts      | 7 +++++--
 src/packages/tour/components/TourTooltip.ts | 8 +++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/packages/tooltip/tooltipContent.ts b/src/packages/tooltip/tooltipContent.ts
index cbc40893d..697b0aad0 100644
--- a/src/packages/tooltip/tooltipContent.ts
+++ b/src/packages/tooltip/tooltipContent.ts
@@ -5,10 +5,13 @@ const { div } = dom.tags;
 export type tooltipContentProps = {
     text: string;
     tooltipRenderAsHtml?: boolean;
+    className?: string;
  };
 
-export const tooltipContetnt = ({ text, tooltipRenderAsHtml }: tooltipContentProps) => {
-  const container = div({});
+export const TooltipContent = ({ text, tooltipRenderAsHtml, className }: tooltipContentProps) => {
+  const container = div({
+    className: className || "introjs-tooltiptext",
+  });
 
   dom.derive(() => {
     const el = container as HTMLElement;
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index 5d6fe6b83..65a4ead9b 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -23,7 +23,7 @@ import { TourStep } from "../steps";
 import { dataStepNumberAttribute } from "../dataAttributes";
 import scrollParentToElement from "../../../util/scrollParentToElement";
 import scrollTo from "../../../util/scrollTo";
-import { tooltipContetnt } from "../../tooltip/tooltipContent";
+import { TooltipContent } from "../../tooltip/tooltipContent";
 
 const { h1, div, input, label, ul, li, a } = dom.tags;
 
@@ -453,13 +453,11 @@ export const TourTooltip = ({
   children.push(Header({ title, skipLabel, onSkipClick }));
 
   children.push(
-    div(
-      { className: tooltipTextClassName },
-      tooltipContetnt({
+      TooltipContent({
         text,
         tooltipRenderAsHtml: props.renderAsHtml,
+        className: tooltipTextClassName,
       })
-    )
   );
 
   if (dontShowAgain) {

From d808e6b7a7c5878bd0374fd121e31333410b9495 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Sat, 12 Apr 2025 10:20:59 +0300
Subject: [PATCH 08/14] test: write test for tooltipContent component and run
 prettier

---
 src/packages/tooltip/tooltipContent.test.ts | 50 +++++++++++++++++++++
 src/packages/tooltip/tooltipContent.ts      | 16 ++++---
 src/packages/tour/components/TourTooltip.ts | 10 ++---
 3 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 src/packages/tooltip/tooltipContent.test.ts

diff --git a/src/packages/tooltip/tooltipContent.test.ts b/src/packages/tooltip/tooltipContent.test.ts
new file mode 100644
index 000000000..660b04aeb
--- /dev/null
+++ b/src/packages/tooltip/tooltipContent.test.ts
@@ -0,0 +1,50 @@
+import { TooltipContent } from "./tooltipContent";
+
+describe("TooltipContent", () => {
+  it("renders plain text when tooltipRenderAsHtml is false", () => {
+    const el = TooltipContent({
+      text: "Hello, tooltip!",
+      tooltipRenderAsHtml: false,
+    });
+
+    expect(el.textContent).toBe("Hello, tooltip!");
+    expect(el.innerHTML).toBe("Hello, tooltip!");
+    expect(el.className).toBe("introjs-tooltiptext");
+  });
+
+  it("renders HTML content when tooltipRenderAsHtml is true", () => {
+    const el = TooltipContent({
+      text: "<strong>Bold Text</strong>",
+      tooltipRenderAsHtml: true,
+    });
+
+    expect(el.innerHTML).toBe("<strong>Bold Text</strong>");
+    expect(el.querySelector("strong")?.textContent).toBe("Bold Text");
+  });
+
+  it("applies a custom class when provided", () => {
+    const el = TooltipContent({
+      text: "Custom class test",
+      className: "my-custom-tooltip",
+    });
+
+    expect(el.className).toBe("my-custom-tooltip");
+    expect(el.textContent).toBe("Custom class test");
+  });
+
+  it("clears old content on re-derivation", () => {
+    const el = TooltipContent({
+      text: "<i>Initial</i>",
+      tooltipRenderAsHtml: true,
+    });
+
+    el.innerHTML = "<b>Old Content</b>"; // Simulate old content
+    const updated = TooltipContent({
+      text: "Updated text",
+      tooltipRenderAsHtml: false,
+    });
+
+    expect(updated.innerHTML).toBe("Updated text");
+    expect(updated.querySelector("b")).toBeNull();
+  });
+});
diff --git a/src/packages/tooltip/tooltipContent.ts b/src/packages/tooltip/tooltipContent.ts
index 697b0aad0..19d12e316 100644
--- a/src/packages/tooltip/tooltipContent.ts
+++ b/src/packages/tooltip/tooltipContent.ts
@@ -3,12 +3,16 @@ import dom from "../dom";
 const { div } = dom.tags;
 
 export type tooltipContentProps = {
-    text: string;
-    tooltipRenderAsHtml?: boolean;
-    className?: string;
- };
+  text: string;
+  tooltipRenderAsHtml?: boolean;
+  className?: string;
+};
 
-export const TooltipContent = ({ text, tooltipRenderAsHtml, className }: tooltipContentProps) => {
+export const TooltipContent = ({
+  text,
+  tooltipRenderAsHtml,
+  className,
+}: tooltipContentProps) => {
   const container = div({
     className: className || "introjs-tooltiptext",
   });
@@ -18,7 +22,7 @@ export const TooltipContent = ({ text, tooltipRenderAsHtml, className }: tooltip
     if (!el) return;
 
     // Clear existing content
-    el.innerHTML = '';
+    el.innerHTML = "";
 
     if (tooltipRenderAsHtml && text) {
       const fragment = document.createRange().createContextualFragment(text);
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index 65a4ead9b..0553f8f47 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -453,11 +453,11 @@ export const TourTooltip = ({
   children.push(Header({ title, skipLabel, onSkipClick }));
 
   children.push(
-      TooltipContent({
-        text,
-        tooltipRenderAsHtml: props.renderAsHtml,
-        className: tooltipTextClassName,
-      })
+    TooltipContent({
+      text,
+      tooltipRenderAsHtml: props.renderAsHtml,
+      className: tooltipTextClassName,
+    })
   );
 
   if (dontShowAgain) {

From 5ccedda7432db6eb1daa886de49a32d655bb1a0b Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Sat, 12 Apr 2025 17:42:39 +0300
Subject: [PATCH 09/14] test: write test for tooltipRenderAsHtml

---
 src/packages/tour/tour.test.ts | 51 +++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/packages/tour/tour.test.ts b/src/packages/tour/tour.test.ts
index 84df4fb22..e3fee7f8d 100644
--- a/src/packages/tour/tour.test.ts
+++ b/src/packages/tour/tour.test.ts
@@ -613,31 +613,42 @@ describe("Tour", () => {
     });
   });
 
-  test("should have tooltipRenderAsHtml option set as false", async () => {
-    // Arrange
-    const mockTour = getMockTour();
-    mockTour.setOptions({
-      tooltipRenderAsHtml: false,
-    });
+  describe("tooltipRenderAsHtml", () => {
+    test("should render HTML when tooltipRenderAsHtml is true", async () => {
+      const tour = new Tour();
 
-    // Act
-    await mockTour.start();
+      // Arrange & Act
+      await tour
+        .setOptions({
+          tooltipRenderAsHtml: true,
+        })
+        .start();
 
-    // Assert
-    expect(mockTour.getOption("tooltipRenderAsHtml")).toBeFalsy();
-  });
+      tooltipText().innerHTML = "<b>Bold text</b> and <i>italic text</i>";
 
-  test("should have tooltipRenderAsHtml option set as true", async () => {
-    // Arrange
-    const mockTour = getMockTour();
-    mockTour.setOptions({
-      tooltipRenderAsHtml: true,
+      // Assert
+      expect(content(tooltipText())).toBe(
+        "<b>Bold text</b> and <i>italic text</i>"
+      );
+      expect(tooltipText().querySelector("b")?.textContent).toBe("Bold text");
+      expect(tooltipText().querySelector("i")?.textContent).toBe("italic text");
     });
+    test("should not render HTML when tooltipRenderAsHtml is false", async () => {
+      const tour = new Tour();
 
-    // Act
-    await mockTour.start();
+      // Arrange & Act
+      await tour
+        .setOptions({
+          tooltipRenderAsHtml: false,
+        })
+        .start();
 
-    // Assert
-    expect(mockTour.getOption("tooltipRenderAsHtml")).toBeTruthy();
+      tooltipText().innerHTML = "<b>Bold text</b> and <i>italic text</i>";
+
+      // Assert
+      expect(content(tooltipText())).toBe(
+        "<b>Bold text</b> and <i>italic text</i>"
+      );
+    });
   });
 });

From b9f17c3192778fe4ec3008c8f7e2a972076e926d Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Sun, 13 Apr 2025 10:50:10 +0300
Subject: [PATCH 10/14] feat: add tooltipContent in hintTooltip

---
 src/packages/hint/components/HintTooltip.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/packages/hint/components/HintTooltip.ts b/src/packages/hint/components/HintTooltip.ts
index 8619855be..7380de76b 100644
--- a/src/packages/hint/components/HintTooltip.ts
+++ b/src/packages/hint/components/HintTooltip.ts
@@ -2,6 +2,7 @@ import { Tooltip, TooltipProps } from "../../tooltip/tooltip";
 import dom from "../../dom";
 import { tooltipTextClassName } from "../className";
 import { HintItem } from "../hintItem";
+import { TooltipContent } from "../../tooltip/tooltipContent";
 
 const { a, p, div } = dom.tags;
 
@@ -26,6 +27,8 @@ export const HintTooltip = ({
   className,
   ...props
 }: HintTooltipProps) => {
+  const text = hintItem.hint;
+
   return Tooltip(
     {
       ...props,
@@ -46,6 +49,11 @@ export const HintTooltip = ({
     [
       div(
         { className: `${tooltipTextClassName} ${className || ""}` },
+        TooltipContent({
+          text: text || "",
+          tooltipRenderAsHtml: props.renderAsHtml,
+          className: tooltipTextClassName,
+        }),
         p(hintItem.hint || ""),
         closeButtonEnabled
           ? a(

From e47a852664d11deab031157eeb8ec9f918995d87 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Sun, 13 Apr 2025 10:56:50 +0300
Subject: [PATCH 11/14] test: fix test from component

---
 src/packages/tooltip/tooltipContent.test.ts | 23 +++------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/packages/tooltip/tooltipContent.test.ts b/src/packages/tooltip/tooltipContent.test.ts
index 660b04aeb..fc5e9fcbe 100644
--- a/src/packages/tooltip/tooltipContent.test.ts
+++ b/src/packages/tooltip/tooltipContent.test.ts
@@ -3,13 +3,12 @@ import { TooltipContent } from "./tooltipContent";
 describe("TooltipContent", () => {
   it("renders plain text when tooltipRenderAsHtml is false", () => {
     const el = TooltipContent({
-      text: "Hello, tooltip!",
+      text: "<strong>Bold Text</strong>",
       tooltipRenderAsHtml: false,
     });
 
-    expect(el.textContent).toBe("Hello, tooltip!");
-    expect(el.innerHTML).toBe("Hello, tooltip!");
-    expect(el.className).toBe("introjs-tooltiptext");
+    expect(el.innerHTML).toBe("&lt;strong&gt;Bold Text&lt;/strong&gt;");
+    expect(el.querySelector("strong")).toBeNull();
   });
 
   it("renders HTML content when tooltipRenderAsHtml is true", () => {
@@ -31,20 +30,4 @@ describe("TooltipContent", () => {
     expect(el.className).toBe("my-custom-tooltip");
     expect(el.textContent).toBe("Custom class test");
   });
-
-  it("clears old content on re-derivation", () => {
-    const el = TooltipContent({
-      text: "<i>Initial</i>",
-      tooltipRenderAsHtml: true,
-    });
-
-    el.innerHTML = "<b>Old Content</b>"; // Simulate old content
-    const updated = TooltipContent({
-      text: "Updated text",
-      tooltipRenderAsHtml: false,
-    });
-
-    expect(updated.innerHTML).toBe("Updated text");
-    expect(updated.querySelector("b")).toBeNull();
-  });
 });

From 671af7d113aef1235720103809fc1140d14f16ef Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Sun, 13 Apr 2025 11:20:14 +0300
Subject: [PATCH 12/14] refactor: relocate renderAsHtml option

---
 src/packages/hint/components/HintTooltip.ts | 4 +++-
 src/packages/tooltip/tooltip.ts             | 2 --
 src/packages/tour/components/TourTooltip.ts | 4 +++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/packages/hint/components/HintTooltip.ts b/src/packages/hint/components/HintTooltip.ts
index 7380de76b..4f5a79018 100644
--- a/src/packages/hint/components/HintTooltip.ts
+++ b/src/packages/hint/components/HintTooltip.ts
@@ -16,6 +16,7 @@ export type HintTooltipProps = Omit<
   closeButtonLabel: string;
   closeButtonClassName: string;
   className?: string;
+  renderAsHtml?: boolean;
 };
 
 export const HintTooltip = ({
@@ -25,6 +26,7 @@ export const HintTooltip = ({
   closeButtonLabel,
   closeButtonClassName,
   className,
+  renderAsHtml,
   ...props
 }: HintTooltipProps) => {
   const text = hintItem.hint;
@@ -51,7 +53,7 @@ export const HintTooltip = ({
         { className: `${tooltipTextClassName} ${className || ""}` },
         TooltipContent({
           text: text || "",
-          tooltipRenderAsHtml: props.renderAsHtml,
+          tooltipRenderAsHtml: renderAsHtml,
           className: tooltipTextClassName,
         }),
         p(hintItem.hint || ""),
diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
index 8e82ec74b..870502e76 100644
--- a/src/packages/tooltip/tooltip.ts
+++ b/src/packages/tooltip/tooltip.ts
@@ -315,8 +315,6 @@ export type TooltipProps = {
   autoPosition: boolean;
   positionPrecedence: TooltipPosition[];
 
-  renderAsHtml?: boolean;
-
   onClick?: (e: any) => void;
   className?: string;
 };
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index 0553f8f47..1d52b5039 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -406,6 +406,7 @@ export type TourTooltipProps = Omit<
 
   dontShowAgain: boolean;
   dontShowAgainLabel: string;
+  renderAsHtml?: boolean;
   onDontShowAgainChange: (checked: boolean) => void;
 };
 
@@ -443,6 +444,7 @@ export const TourTooltip = ({
   dontShowAgain,
   onDontShowAgainChange,
   dontShowAgainLabel,
+  renderAsHtml,
   ...props
 }: TourTooltipProps) => {
   const children = [];
@@ -455,7 +457,7 @@ export const TourTooltip = ({
   children.push(
     TooltipContent({
       text,
-      tooltipRenderAsHtml: props.renderAsHtml,
+      tooltipRenderAsHtml: renderAsHtml,
       className: tooltipTextClassName,
     })
   );

From 8802fe7f0f6904cfa7ba2c21ad789afe9e02a963 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Mon, 14 Apr 2025 11:41:12 +0300
Subject: [PATCH 13/14] fix test for tooltipRenderAsHtml

---
 src/packages/tour/tour.test.ts | 51 +++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/packages/tour/tour.test.ts b/src/packages/tour/tour.test.ts
index e3fee7f8d..f01422be0 100644
--- a/src/packages/tour/tour.test.ts
+++ b/src/packages/tour/tour.test.ts
@@ -614,41 +614,54 @@ describe("Tour", () => {
   });
 
   describe("tooltipRenderAsHtml", () => {
+    beforeEach(() => {
+      document.body.innerHTML = ""; // Clear previous test DOM
+    });
     test("should render HTML when tooltipRenderAsHtml is true", async () => {
       const tour = new Tour();
 
       // Arrange & Act
-      await tour
-        .setOptions({
-          tooltipRenderAsHtml: true,
-        })
-        .start();
+      tour.setOptions({
+        tooltipRenderAsHtml: true,
+        steps: [
+          {
+            intro: "<b>Bold text</b> and <i>italic text</i>",
+          },
+        ],
+      });
 
-      tooltipText().innerHTML = "<b>Bold text</b> and <i>italic text</i>";
+      await tour.start();
 
       // Assert
-      expect(content(tooltipText())).toBe(
-        "<b>Bold text</b> and <i>italic text</i>"
-      );
-      expect(tooltipText().querySelector("b")?.textContent).toBe("Bold text");
-      expect(tooltipText().querySelector("i")?.textContent).toBe("italic text");
+      const tooltip = find(".introjs-tooltiptext");
+      expect(tooltip).not.toBeNull();
+      expect(tooltip?.querySelector("b")?.textContent).toBe("Bold text");
+      expect(tooltip?.querySelector("i")?.textContent).toBe("italic text");
     });
+
     test("should not render HTML when tooltipRenderAsHtml is false", async () => {
       const tour = new Tour();
 
       // Arrange & Act
-      await tour
-        .setOptions({
-          tooltipRenderAsHtml: false,
-        })
-        .start();
+      tour.setOptions({
+        tooltipRenderAsHtml: false,
+        steps: [
+          {
+            intro: "<b>Bold text</b> and <i>italic text</i>",
+          },
+        ],
+      });
 
-      tooltipText().innerHTML = "<b>Bold text</b> and <i>italic text</i>";
+      await tour.start();
 
       // Assert
-      expect(content(tooltipText())).toBe(
-        "<b>Bold text</b> and <i>italic text</i>"
+      const tooltip = find(".introjs-tooltiptext");
+      expect(tooltip).not.toBeNull();
+      expect(tooltip?.innerHTML).toContain(
+        "&lt;b&gt;Bold text&lt;/b&gt; and &lt;i&gt;italic text&lt;/i&gt;"
       );
+      expect(tooltip?.querySelector("b")).toBeNull();
+      expect(tooltip?.querySelector("i")).toBeNull();
     });
   });
 });

From 73c8100d0fd61f6316c9c5571b4da7d9d3ac2b94 Mon Sep 17 00:00:00 2001
From: Parvin <parvinmh74@gmail.com>
Date: Mon, 21 Apr 2025 11:57:33 +0300
Subject: [PATCH 14/14] fix all deprecated properties

---
 example/RTL/index.html                        | 2 +-
 example/auto-position/index.html              | 2 +-
 example/bootstrap/v3/index.html               | 2 +-
 example/callbacks/onbeforechange.html         | 2 +-
 example/disable-interaction/index.html        | 2 +-
 example/disable-interaction/programmatic.html | 2 +-
 example/groups/index.html                     | 4 ++--
 example/hello-world/exit-confirm.html         | 2 +-
 example/hello-world/index.html                | 2 +-
 example/hello-world/positions.html            | 2 +-
 example/hello-world/withProgress.html         | 2 +-
 example/hello-world/withScroll.html           | 2 +-
 example/hello-world/withoutBullets.html       | 2 +-
 example/hello-world/withoutButtons.html       | 2 +-
 example/multi-page/index.html                 | 2 +-
 example/multi-page/second.html                | 2 +-
 example/programmatic/index.html               | 2 +-
 example/svg/d3.htm                            | 2 +-
 example/withoutElement/index.html             | 2 +-
 19 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/example/RTL/index.html b/example/RTL/index.html
index d436bd16d..6ad72bb2c 100644
--- a/example/RTL/index.html
+++ b/example/RTL/index.html
@@ -44,7 +44,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-title="یک عنوان کوتاه" data-intro="ویکی‌پدیا مقاله‌های رایگانی را ارائه می‌دهد که برای توزیع بیشتر در نظر گرفته شده‌اند و می‌توان آن‌ها را در زیر مدخل‌های واژگانی (لم) و همچنین پورتال‌ها بر اساس حوزه‌های موضوعی و فهرست‌های موضوعی یافت.">RTL Style</h1>
         <p class="lead" data-step="4"data-intro="یک مرحله دیگه">This is the <abbr lang="en" title="Right To Left">RTL</abbr> version of IntroJs which includes an addition CSS file to perform the RTL style.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'doneLabel': 'اتمام' }).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'doneLabel': 'اتمام' }).start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/auto-position/index.html b/example/auto-position/index.html
index 43833c928..2af3d33c2 100644
--- a/example/auto-position/index.html
+++ b/example/auto-position/index.html
@@ -17,7 +17,7 @@
     <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
 	<script>
 		function startTour() {
-			var tour = introJs()
+			var tour = introJs.tour()
 			tour.setOption('tooltipPosition', 'auto');
 			tour.setOption('positionPrecedence', ['left', 'right', 'top', 'bottom']);
 			tour.start();
diff --git a/example/bootstrap/v3/index.html b/example/bootstrap/v3/index.html
index b37505505..36ff7a0e5 100755
--- a/example/bootstrap/v3/index.html
+++ b/example/bootstrap/v3/index.html
@@ -83,7 +83,7 @@
             <div class="intro-text">
                 <div data-intro="This is the name of this site" class="intro-lead-in">Welcome To Our Studio!</div>
                 <div  data-intro="This is the main headline" class="intro-heading">It's Nice To Meet You</div>
-                <a href="javascript:void(0)" onclick="introJs().start();" class="page-scroll btn btn-xl">Start Introjs</a>
+                <a href="javascript:void(0)" onclick="introJs.tour().start();" class="page-scroll btn btn-xl">Start Introjs</a>
             </div>
         </div>
     </header>
diff --git a/example/callbacks/onbeforechange.html b/example/callbacks/onbeforechange.html
index d510ac14d..1d2a1db38 100644
--- a/example/callbacks/onbeforechange.html
+++ b/example/callbacks/onbeforechange.html
@@ -70,7 +70,7 @@ <h4>Section Six</h4>
 
     <script type="text/javascript">
       function startIntro(){
-        var intro = introJs();
+        var intro = introJs.tour();
         intro.onbeforechange(function () {
           if (this.currentStep() === 2) {
             alert('You cannot continue! :P')
diff --git a/example/disable-interaction/index.html b/example/disable-interaction/index.html
index 843424e6b..3126d64f4 100644
--- a/example/disable-interaction/index.html
+++ b/example/disable-interaction/index.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="Interaction is disabled in this step" data-disable-interaction="1">Disable Interaction</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This page demonstrates the usage of <code>data-disable-interaction</code> attribute.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/disable-interaction/programmatic.html b/example/disable-interaction/programmatic.html
index 144e882b1..912bd9bee 100644
--- a/example/disable-interaction/programmatic.html
+++ b/example/disable-interaction/programmatic.html
@@ -72,7 +72,7 @@ <h4>Section Six</h4>
     <script
 type="text/javascript">
       function startIntro() {
-        var intro = introJs();
+        var intro = introJs.tour();
 
         intro.setOptions({
           steps: [
diff --git a/example/groups/index.html b/example/groups/index.html
index 98bda9a58..db85a3966 100644
--- a/example/groups/index.html
+++ b/example/groups/index.html
@@ -35,8 +35,8 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1>Groups</h1>
         <p class="lead">An example of grouping, with <code>data-intro-group</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start('odd');">Show me odds</a>
-        <a class="btn btn-large btn-info" href="javascript:void(0);" onclick="javascript:introJs().start('even');">Show me evens</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start('odd');">Show me odds</a>
+        <a class="btn btn-large btn-info" href="javascript:void(0);" onclick="javascript:introJs.tour().start('even');">Show me evens</a>
       </div>
 
       <hr>
diff --git a/example/hello-world/exit-confirm.html b/example/hello-world/exit-confirm.html
index 1540e9dde..749997a05 100644
--- a/example/hello-world/exit-confirm.html
+++ b/example/hello-world/exit-confirm.html
@@ -71,7 +71,7 @@ <h4>Section Six</h4>
 
     <script type="text/javascript">
       function startTour() {
-        introJs().start().onbeforeexit(function () {
+        introJs.tour().start().onbeforeexit(function () {
           return confirm("Are you sure?");
         });
       }
diff --git a/example/hello-world/index.html b/example/hello-world/index.html
index 5f6e8cbde..8f9eea0f4 100644
--- a/example/hello-world/index.html
+++ b/example/hello-world/index.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!" data-title="A short title">Basic Usage</h1>
         <p class="lead" data-step="4" data-intro="Another step." data-title="foo">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/hello-world/positions.html b/example/hello-world/positions.html
index 43864b7eb..d259a611d 100644
--- a/example/hello-world/positions.html
+++ b/example/hello-world/positions.html
@@ -48,7 +48,7 @@ <h3 class="muted" style="margin: 0;">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!" style="position: relative;">Different element positions</h1>
         <p class="lead" data-step="4" data-intro="Another step.">In this example you see that Intro.js works with all types of <code>position</code>.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/hello-world/withProgress.html b/example/hello-world/withProgress.html
index ac19ef05c..9f7052c74 100644
--- a/example/hello-world/withProgress.html
+++ b/example/hello-world/withProgress.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!">Progress-bar</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showProgress', true).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOption('showProgress', true).start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/hello-world/withScroll.html b/example/hello-world/withScroll.html
index 08fd22a19..d499c261c 100644
--- a/example/hello-world/withScroll.html
+++ b/example/hello-world/withScroll.html
@@ -45,7 +45,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="3" data-intro="This is a tooltip!">Works with a Scrollable Element</h1>
         <p class="lead">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/hello-world/withoutBullets.html b/example/hello-world/withoutBullets.html
index 34c611ecf..781032972 100644
--- a/example/hello-world/withoutBullets.html
+++ b/example/hello-world/withoutBullets.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!">Without Bullets</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showBullets', false).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOption('showBullets', false).start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/hello-world/withoutButtons.html b/example/hello-world/withoutButtons.html
index f080040db..bc5991c37 100644
--- a/example/hello-world/withoutButtons.html
+++ b/example/hello-world/withoutButtons.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!">Without Buttons</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showButtons', false).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOption('showButtons', false).start();">Show me how</a>
       </div>
 
       <hr>
diff --git a/example/multi-page/index.html b/example/multi-page/index.html
index 8b7daf5e0..bfa349570 100644
--- a/example/multi-page/index.html
+++ b/example/multi-page/index.html
@@ -64,7 +64,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       document.getElementById('startButton').onclick = function() {
-        introJs().setOption('doneLabel', 'Next page').oncomplete(function() {
+        introJs.tour().setOption('doneLabel', 'Next page').oncomplete(function() {
           window.location.href = 'multi-page/second.html?multipage=true';
         }).start();
       };
diff --git a/example/multi-page/second.html b/example/multi-page/second.html
index bbee53391..e12fdd3d7 100644
--- a/example/multi-page/second.html
+++ b/example/multi-page/second.html
@@ -68,7 +68,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       if (RegExp('multipage', 'gi').test(window.location.search)) {
-        introJs().start();
+        introJs.tour().start();
       }
     </script>
   </body>
diff --git a/example/programmatic/index.html b/example/programmatic/index.html
index f1acc4a9e..978a0a326 100644
--- a/example/programmatic/index.html
+++ b/example/programmatic/index.html
@@ -71,7 +71,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       function startIntro(){
-        var intro = introJs();
+        var intro = introJs.tour();
           intro.setOptions({
             steps: [
               {
diff --git a/example/svg/d3.htm b/example/svg/d3.htm
index 28ad5df78..4cd9d8f28 100644
--- a/example/svg/d3.htm
+++ b/example/svg/d3.htm
@@ -47,7 +47,7 @@ <h1 data-intro="This is a tooltip!">SVG</h1>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       document.getElementById('startButton').onclick = function() {
-        introJs().start();
+        introJs.tour().start();
       };
     </script>
   </body>
diff --git a/example/withoutElement/index.html b/example/withoutElement/index.html
index 10f478411..a0c9e55ce 100644
--- a/example/withoutElement/index.html
+++ b/example/withoutElement/index.html
@@ -71,7 +71,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       function startIntro(){
-        var intro = introJs();
+        var intro = introJs.tour();
           intro.setOptions({
             steps: [
               {