Skip to content
All skills

Driver.js Guide

Product tours, onboarding flows, and element highlighting reference

v1.1.0SkillRobin van Baalen/driverjs-guide:driverjs-guideSource
/plugin install driverjs-guide@rvanbaalen

When to use

Use when building product tours, onboarding flows, guided walkthroughs, contextual form help, feature announcements, or “turn off the lights” focus overlays with Driver.js. Not for unrelated tooltip libraries (Tippy.js, Floating UI) or general CSS overlay questions.

How it works

Starts with a pre-flight dependency check — grep package.json, the lock file, and existing driver.js imports — so it either matches the project’s existing conventions or emits the right install command for the detected package manager. From there it is a complete API reference covering the three configuration layers (driver-level, popover, and per-step DriveStep), where step-level settings override global ones.

Capabilities

  • Installation via npm, pnpm, yarn, or CDN, plus the required driver.js/dist/driver.css import
  • Multi-step tours (drive()), single-element highlights (highlight()), and element-less floating popovers
  • Full config reference: animate, smoothScroll, overlayColor/overlayOpacity, allowClose, overlayClickBehavior, stagePadding/stageRadius, allowKeyboardControl, disableActiveInteraction, button and progress options
  • Every lifecycle hook — onPopoverRender, onHighlightStarted, onHighlighted, onDeselected, onDestroyStarted, onDestroyed, onNextClick, onPrevClick, onCloseClick — with the State and PopoverDOM shapes they receive
  • Runtime API: moveNext, movePrevious, moveTo, refresh, setConfig, setSteps, getState, and the step-position queries
  • Theming: the full CSS class list, popoverClass scoping, and the arrow border-color classes you must update alongside a custom background
  • Recipes: async/dynamic tours, confirm-before-exit, locked tours, element as a resolver function, popover side/align placement, and custom footer buttons
  • React and Vue integration patterns, including destroy() on unmount

Pitfalls it catches

Overriding onNextClick/onPrevClick disables default navigation — you must call moveNext()/movePrevious() yourself; the same applies to onDestroyStarted and destroy(). It also covers arrow/background color mismatches, stale highlight positions after layout shifts, missing CSS imports, and running more than one driver instance at a time.

Invoke

/driverjs-guide:driverjs-guide

Also auto-triggers on driver.js usage or on phrases like “product tour”, “onboarding tour”, “walkthrough”, or “element highlighting”.