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");
+    });
+  });
 });