diff --git a/docs/src/content/guides/configuration.mdx b/docs/src/content/guides/configuration.mdx
index cbbcb1a..2826a3d 100644
--- a/docs/src/content/guides/configuration.mdx
+++ b/docs/src/content/guides/configuration.mdx
@@ -34,8 +34,8 @@ type Config = {
// Opacity of the backdrop. (default: 0.5)
overlayOpacity?: number;
// What to do when the overlay backdrop is clicked.
- // Possible options are 'close' and 'nextStep'. (default: 'close')
- overlayClickBehavior?: string,
+ // Possible options are 'close', 'nextStep', or a custom function. (default: 'close')
+ overlayClickBehavior?: "close" | "nextStep" | ((element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void),
// Distance between the highlighted element and the cutout. (default: 10)
stagePadding?: number;
// Radius of the cutout around the highlighted element. (default: 5)
diff --git a/index.html b/index.html
index bb8aa00..b1891c8 100644
--- a/index.html
+++ b/index.html
@@ -172,6 +172,7 @@
+
@@ -1144,6 +1145,18 @@ npm install driver.js {
+ const driverObj = driver({
+ animate: true,
+ overlayClickBehavior: (element, step) => {
+ alert("Clicking me");
+ },
+ steps: basicTourSteps,
+ });
+
+ driverObj.drive();
+ });
+
document.getElementById("destroy-btn").addEventListener("click", () => {
driver().destroy();
});
diff --git a/src/config.ts b/src/config.ts
index 7696f92..c4a8e6c 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -16,7 +16,7 @@ export type Config = {
overlayOpacity?: number;
smoothScroll?: boolean;
allowClose?: boolean;
- overlayClickBehavior?: "close" | "nextStep";
+ overlayClickBehavior?: "close" | "nextStep" | DriverHook;
stagePadding?: number;
stageRadius?: number;
diff --git a/src/driver.ts b/src/driver.ts
index 9108aff..1bbe529 100644
--- a/src/driver.ts
+++ b/src/driver.ts
@@ -59,6 +59,19 @@ export function driver(options: Config = {}): Driver {
return;
}
+ if (typeof overlayClickBehavior === "function") {
+ const activeStep = getState("__activeStep");
+ const activeElement = getState("__activeElement");
+
+ overlayClickBehavior(activeElement, activeStep!, {
+ config: getConfig(),
+ state: getState(),
+ driver: getCurrentDriver(),
+ });
+
+ return;
+ }
+
if (overlayClickBehavior === "nextStep") {
moveNext();
}