Merge pull request #2109 from moddi3/fix/override-step-classname

fix: use step class name if exist in favor of a glbal (tour) classname

Author: binrysearch

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"

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