Lifecycle Hooks

Laravel Driver.js allows you to register JavaScript callbacks for every Driver.js lifecycle event. These hooks give you full control over what happens when elements are highlighted, deselected, or when the tour is destroyed.

Available Hooks

Hook	When Called
onHighlightStarted	Before an element is highlighted
onHighlighted	After an element has been highlighted (animation complete)
onDeselected	When the previously highlighted element is deselected
onDestroyStarted	Before the driver is destroyed (can prevent destruction)
onDestroyed	After the driver is destroyed and cleaned up
onNextClick	Override the default Next button click behavior
onPrevClick	Override the default Previous button click behavior
onCloseClick	Override the default Close button click behavior
onPopoverRender	After the popover DOM is created and inserted

Method Signatures

DriverJs::onHighlightStarted(string $callback);
DriverJs::onHighlighted(string $callback);
DriverJs::onDeselected(string $callback);
DriverJs::onDestroyStarted(string $callback);
DriverJs::onDestroyed(string $callback);
DriverJs::onNextClick(string $callback);
DriverJs::onPrevClick(string $callback);
DriverJs::onCloseClick(string $callback);
DriverJs::onPopoverRender(string $callback);

Parameters

• $callback (string): The name of a JavaScript function available in the global scope, or an inline JavaScript function expression.

Example: Basic Lifecycle Hooks

use RealRashid\LaravelDriverJs\Facades\DriverJs;

DriverJs::tour('onboarding')
    ->onHighlightStarted('beforeHighlight')
    ->onHighlighted('afterHighlight')
    ->onDeselected('afterDeselect')
    ->onDestroyed('afterDestroy')
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->render();

Then in your JavaScript:

function beforeHighlight(element, step, opts) {
    console.log('About to highlight:', element);
}

function afterHighlight(element, step, opts) {
    console.log('Highlighted:', element);
}

function afterDeselect(element, step, opts) {
    console.log('Deselected:', element);
}

function afterDestroy(element, step, opts) {
    console.log('Tour destroyed');
}

Example: Inline JavaScript Callbacks

You can also pass inline JavaScript function expressions:

DriverJs::tour('onboarding')
    ->onHighlighted('function(element, step, opts) { console.log("Highlighted!", element); }')
    ->onDestroyed('function() { console.log("Tour ended"); }')
    ->step('#header', 'Welcome')
    ->render();

Hook Resolution Order

Step-level hooks override global config hooks:

1. Step-level hook (e.g., step.onHighlightStarted) is checked first
2. Global config hook (e.g., DriverJs::onHighlightStarted()) is checked next
3. Default Driver.js behavior is used if neither is defined

Details

• The onDestroyStarted hook is special: if defined, calling destroy() will trigger this hook and NOT actually destroy the driver. You must call driver.destroy() again (inside the hook) to actually destroy it. This enables "confirm before exit" patterns.
• The onPopoverRender hook receives the popover DOM reference, allowing you to add custom elements to the popover.
• Named tours preserve your custom onDestroyed callback. The package wraps it so completion tracking and your callback both run.

That's it! You're now equipped to use lifecycle hooks with Laravel Driver.js.