Styling

You can either use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.

Alternatively, if want to modify the Popover DOM, you can use the onPopoverRender callback to get the popover DOM element and do whatever you want with it before popover is rendered.

Have a look at the theming guide for a detailed guide, including the class names to target.

Using CSS

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  popoverClass: 'driverjs-theme'
});

driverObj.highlight({
  element: '#demo-theme',
  popover: {
    title: 'Style However You Want',
    description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
  }
});

Here is the CSS used for the above example:

.driver-popover.driverjs-theme {
  background-color: #fde047;
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #000;
}

.driver-popover.driverjs-theme button:not(.driver-popover-close-btn) {
  flex: 1;
  text-align: center;
  background-color: #000;
  color: #ffffff;
  border: 2px solid #000;
  text-shadow: none;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

.driver-popover.driverjs-theme button:not(.driver-popover-close-btn):hover {
  background-color: #000;
  color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  justify-content: space-between;
  gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
  color: #9b9b9b;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #fde047;
}

Using Hooks

To change the popover’s DOM, for example to add your own buttons, use the onPopoverRender hook. See Custom Buttons for an example.

Overlay

You can customize the overlay opacity and color using overlayOpacity and overlayColor options to change the look of the overlay.

Note: In the examples below we have used highlight method to highlight the elements. The same configuration applies to the tour steps as well.

Overlay Color

Here are some driver.js examples with different overlay colors.

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  overlayColor: 'red'
});

driverObj.highlight({
  popover: {
    title: 'Pass any RGB Color',
    description: 'Here we have set the overlay color to be red. You can pass any RGB color to overlayColor option.'
  }
});

Checklist

Checklists are styled with plain CSS: an accent color for the quick win, or your own class for a full theme.

Accent Color

Set the --driver-checklist-color variable to recolor the progress bar, the ticks and the focus rings while keeping the default look:

Dashboard

:root {
  --driver-checklist-color: #16a34a;
}

Custom Theme

Pass className to add your own class to the widget, then style its parts. The example below is the theme used on the driver.js homepage:

Dashboard

checklist({
  id: "onboarding",
  className: "checklist-brutalist",
  items,
});

Its CSS, and more themes ready to copy, are on the Checklist Themes page.

Class Names

These are the classes you can target:

.driver-checklist {}                  /* The widget, positioned in a corner */
.driver-checklist-bottom-right {}     /* or -bottom-left, -top-right, -top-left */
.driver-checklist-complete {}         /* Added once every item is done */

.driver-checklist-launcher {}         /* The button that opens the panel */
.driver-checklist-launcher-text {}
.driver-checklist-launcher-count {}   /* "1/4" */

.driver-checklist-panel {}
.driver-checklist-header {}
.driver-checklist-title {}
.driver-checklist-description {}
.driver-checklist-close-btn {}

.driver-checklist-progress {}
.driver-checklist-progress-bar {}
.driver-checklist-progress-fill {}
.driver-checklist-progress-text {}    /* "1 of 4" */

.driver-checklist-items {}
.driver-checklist-item {}
.driver-checklist-item-done {}        /* Added to an item once it is done */
.driver-checklist-check {}            /* The circle; a button with allowManualComplete */
.driver-checklist-item-trigger {}     /* The item's link, button or plain row */
.driver-checklist-item-title {}
.driver-checklist-item-description {}

The widget also sets --driver-checklist-progress to the progress as a percentage, for progress designs drawn in CSS, like the progress ring. The font follows the popover’s --driver-popover-font-family variable. See the Checklists guide for position and text options.

Introduction

Examples