driver.js next

Rewritten and enhanced version of driver.js

Highlight Feature

given below are the examples of simple highlight

Animated HighlightBuggy HighlightOff Screen HighlightSimple HighlightTransition HighlightDisallow CloseClick Overlay to NextCustom Overlay Click HandlerSuper Dark HighlightSuper Dim HighlightScrollable AreaInner Scroll AreaNo ElementIs Active?Activate and CheckBackdrop ColorHooksDestroy

given below are the examples of simple highlight

No ButtonsSelected ButtonsNext ButtonPrevious ButtonsNext Previous ButtonsClose ButtonsButton TextsDisabled ButtonsButton ListenersTour Button ListenersPopover Modified in Hook

You can modify the popover as well with custom CSS and JS.

Custom ClassesPopover HookPadding Change

Tour Feature

Examples below show the tour usage of driver.js.

Animated TourNon-Animated TourAsynchronous TourConfirm on ExitProgress TextProgress Text TemplateAPI TestRe Configuring StepsDisable Keyboard Control

Written in TypeScript
Lightweight — only 5kb gzipped
No dependencies
MIT Licensed
Hooks Button Demo — List of hooks fired

Yet another Tour Library?

No, it is not. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with some component, using it as a focus shifter to bring user's attention to some component on page, or using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, etc.

Driver.js is written in Vanilla JS, has zero dependencies and is highly customizable. It has several options allowing you to manipulate how it behaves and also provides you the hooks to manipulate the elements as they are highlighted, about to be highlighted, or deselected.

Installation

You can install it using yarn or npm, whatever you prefer.

yarn add driver.js
npm install driver.js

Or include it using CDN — put the version as [email protected] in the name

https://unpkg.com/driver.js/dist/driver.min.js

Usage and Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae tempore voluptates! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae tempore voluptates!

First -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Second -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Third -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Fourth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Fifth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Sixth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Seventh -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Eighth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.

Ninth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam veniam! Doloribus eos id quaerat.