Here are the options that Driver understands
const driver = new Driver({
+ className: 'scoped-class', // className to wrap driver.js popover
animate: true, // Animate while changing highlighted element
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
@@ -301,14 +303,15 @@ driver.highlight({
Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that
you pass to highlight method
const stepDefinition = {
- element: '#some-item', // Query selector string or Node to be highlighted
- popover: { // There will be no popover if empty or not given
- title: 'Title', // Title on the popover
+ element: '#some-item', // Query selector string or Node to be highlighted
+ popover: { // There will be no popover if empty or not given
+ className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
+ title: 'Title', // Title on the popover
description: 'Description', // Body of the popover
- showButtons: false, // Do not show control buttons in footer
- closeBtnText: 'Close', // Text on the close button for this step
- nextBtnText: 'Next', // Next button text for this step
- prevBtnText: 'Previous', // Previous button text for this step
+ showButtons: false, // Do not show control buttons in footer
+ closeBtnText: 'Close', // Text on the close button for this step
+ nextBtnText: 'Next', // Next button text for this step
+ prevBtnText: 'Previous', // Previous button text for this step
}
};
diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js
index 9883e01..3305e78 100644
--- a/demo/scripts/demo.js
+++ b/demo/scripts/demo.js
@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
{
element: document.getElementById('driver-demo-head'),
popover: {
+ className: 'scoped-driver-popover',
title: 'Before we start',
description: 'This is just one use-case, make sure to check out the rest of the docs below.',
nextBtnText: 'Okay, Start!',
@@ -101,7 +102,8 @@ document.addEventListener('DOMContentLoaded', function () {
animate: false,
opacity: 0.8,
padding: 5,
- showButtons: true
+ showButtons: true,
+ className: 'boring-scope'
});
boringTourDriver.defineSteps(tourSteps);
diff --git a/readme.md b/readme.md
index 375ed6b..8e13b1c 100644
--- a/readme.md
+++ b/readme.md
@@ -146,6 +146,7 @@ driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
+ className: 'first-step-popover-class',
title: 'Title on Popover',
description: 'Body of the popover',
position: 'left'
@@ -238,6 +239,7 @@ Here are the options that Driver understands:
```javascript
const driver = new Driver({
+ className: 'scoped-class', // className to wrap driver.js popover
animate: true, // Whether to animate or not
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
@@ -270,6 +272,7 @@ const stepDefinition = {
element: '#some-item', // Query selector string or Node to be highlighted
stageBackground: '#ffffff', // This will override the one set in driver
popover: { // There will be no popover if empty or not given
+ className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
title: 'Title', // Title on the popover
description: 'Description', // Body of the popover
showButtons: false, // Do not show control buttons in footer
diff --git a/src/common/constants.js b/src/common/constants.js
index f42a081..82c9116 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -32,8 +32,8 @@ export const CLASS_BTN_DISABLED = 'driver-disabled';
export const ANIMATION_DURATION_MS = 400;
// language=HTML
-export const POPOVER_HTML = `
-
+export const POPOVER_HTML = (className = '') => `
+
Popover Title
Popover Description
diff --git a/src/core/popover.js b/src/core/popover.js
index fe1feb4..0c4bb10 100644
--- a/src/core/popover.js
+++ b/src/core/popover.js
@@ -54,7 +54,7 @@ export default class Popover extends Element {
attachNode() {
let popover = this.document.getElementById(ID_POPOVER);
if (!popover) {
- popover = createNodeFromString(POPOVER_HTML);
+ popover = createNodeFromString(POPOVER_HTML(this.options.className));
document.body.appendChild(popover);
}
diff --git a/src/index.js b/src/index.js
index f63de10..42c54fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -370,9 +370,15 @@ export default class Driver {
let popover = null;
if (elementOptions.popover && elementOptions.popover.title) {
+ const mergedClassNames = [
+ this.options.className,
+ elementOptions.popover.className,
+ ].filter(c => c).join(' ');
+
const popoverOptions = {
...this.options,
...elementOptions.popover,
+ className: mergedClassNames,
totalCount: allSteps.length,
currentIndex: index,
isFirst: index === 0,