Theming

You can customize the look and feel of the driver by adding custom class to popover or applying CSS to different classes used by driver.js.

Styling Popover

You can set the popoverClass option globally in the driver configuration or at the step level to apply custom class to the popover and then use CSS to apply styles.

const driverObj = driver({
  popoverClass: 'my-custom-popover-class'
});

// or you can also have different classes for different steps
const driverObj2 = driver({
  steps: [
    {
      element: '#some-element',
      popover: {
        title: 'Title',
        description: 'Description',
        popoverClass: 'my-custom-popover-class'
      }
    }
  ],
})

Here is the list of classes applied to the popover which you can use in conjunction with popoverClass option to apply custom styles on the popover.

/* Class assigned to popover wrapper */
.driver-popover {}

/* Arrow pointing towards the highlighted element */
.driver-popover-arrow {}

/* Rendered side and alignment of the popover. These reflect the actual
   position after Driver.js flips the popover to fit it in the viewport,
   so they may differ from the side/align you configured. */
.driver-popover-side-top {}
.driver-popover-side-right {}
.driver-popover-side-bottom {}
.driver-popover-side-left {}
.driver-popover-align-start {}
.driver-popover-align-center {}
.driver-popover-align-end {}

/* Title and description */
.driver-popover-title {}
.driver-popover-description {}

/* Close button displayed on the top right corner */
.driver-popover-close-btn {}

/* Footer of the popover displaying progress and navigation buttons */
.driver-popover-footer {}
.driver-popover-progress-text {}
.driver-popover-prev-btn {}
.driver-popover-next-btn {}

/* Shared style for the footer buttons. The built-in prev/next buttons carry it,
   and you can add it to custom buttons created in onPopoverRender to give them
   the default button look (or leave it off to apply your own styles). */
.driver-popover-footer-btn {}

/* Added to the next button on the last step, when it acts as the "Done" button */
.driver-popover-next-btn.driver-popover-done-btn {}

Visit the example page for an example that modifies the popover styles.

Modifying Popover DOM

Alternatively, you can also use the onPopoverRender hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.

type PopoverDOM = {
  wrapper: HTMLElement;
  arrow: HTMLElement;
  title: HTMLElement;
  description: HTMLElement;
  footer: HTMLElement;
  progress: HTMLElement;
  previousButton: HTMLElement;
  nextButton: HTMLElement;
  closeButton: HTMLElement;
  footerButtons: HTMLElement;
};

onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;

Styling Page

Following classes are applied to the page when the driver is active.

/* Applied to the `body` when the driver: */
.driver-active {}  /* is active */
.driver-fade {}    /* is animated */
.driver-simple {}  /* is not animated */

Following classes are applied to the overlay i.e. the lightbox displayed over the page.

.driver-overlay {}

Styling Highlighted Element

Whenever an element is highlighted, the following classes are applied to it.

.driver-active-element {}