From 1faebb212ca5cd7836e7af00d9a66c0c5733ab2b Mon Sep 17 00:00:00 2001
From: Vlad Ivanov <v.ivanov@sendpulse.com>
Date: Wed, 2 Jul 2025 23:15:50 +0300
Subject: [PATCH] fix: use step class name if exist in favor of a glbal (tour)
 classname

---
 src/packages/tour/components/TourRoot.ts |  2 +-
 src/packages/tour/modal.cy.ts            | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/packages/tour/components/TourRoot.ts b/src/packages/tour/components/TourRoot.ts
index 0c45d8cfc..c75adb0eb 100644
--- a/src/packages/tour/components/TourRoot.ts
+++ b/src/packages/tour/components/TourRoot.ts
@@ -128,7 +128,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
         doneLabel: tour.getOption("doneLabel"),
         hideNext: tour.getOption("hideNext"),
         hidePrev: tour.getOption("hidePrev"),
-        className: tour.getOption("tooltipClass"),
+        className: step.val.tooltipClass || tour.getOption("tooltipClass"),
         progress: tour.getOption("showProgress"),
         progressBarAdditionalClass: tour.getOption(
           "progressBarAdditionalClass"
diff --git a/src/packages/tour/modal.cy.ts b/src/packages/tour/modal.cy.ts
index 85b9711cd..e3b394a84 100644
--- a/src/packages/tour/modal.cy.ts
+++ b/src/packages/tour/modal.cy.ts
@@ -129,4 +129,27 @@ context("Modal", () => {
       });
     });
   });
+
+  it("should apply tooltipClass from step configuration over tour tooltipClass", () => {
+    cy.visit("./cypress/setup/index.html").then((win) => {
+      cy.viewport("macbook-13");
+
+      const instance = win.introJs.tour().setOptions({
+        tooltipClass: "tour-tooltip",
+        steps: [
+          {
+            element: "#main-section",
+            intro: "step tooltip class",
+            tooltipClass: "step-tooltip",
+          },
+        ],
+      });
+      instance.refresh(true);
+      instance.start();
+
+      cy.get(".introjs-tooltip")
+        .should("have.class", "step-tooltip")
+        .should("not.have.class", "tour-tooltip");
+    });
+  });
 });