Laravel Driver.js

Appearance

Adding Steps ​

Steps are the building blocks of a tour. Each step highlights a specific element on the page and displays a popover with contextual information. Laravel Driver.js provides two ways to add steps: the quick step() method and the detailed addStep() builder.

Quick Method: step() ​

Use the step() method for adding steps with the most common options in a single call:

php
DriverJs::step(string $element, string $title, string $description = '', array $options = []);

Parameters ​

  • $element (string): CSS selector for the target element.
  • $title (string): Popover title.
  • $description (string, optional): Popover description.
  • $options (array, optional): Additional step options (side, align, etc.).

Example ​

php
use RealRashid\LaravelDriverJs\Facades\DriverJs;

DriverJs::tour('onboarding')
    ->step('#header', 'Welcome!', 'This is the header.')
    ->step('#nav', 'Navigation', 'Use these links to get around.', [
        'side' => 'right',
        'align' => 'start',
    ])
    ->step('#footer', "That's all!")
    ->render();

Detailed Method: addStep() ​

Use addStep() when you need fine-grained control over each step's configuration:

php
DriverJs::addStep(?string $element = null);

This returns a Step builder instance that supports full fluent chaining.

Example ​

php
use RealRashid\LaravelDriverJs\Facades\DriverJs;

DriverJs::addStep('#header')
    ->title('Welcome!')
    ->description('This is the main header of your dashboard.')
    ->side('bottom')
    ->align('center')
    ->showProgress(true)
    ->nextBtnText('Continue');

DriverJs::addStep('#nav')
    ->title('Navigation')
    ->description('Use these links to navigate between pages.')
    ->side('right')
    ->align('start');

DriverJs::tour('dashboard')
    ->showProgress()
    ->render();

Step Without an Element ​

If you omit the element selector, Driver.js will display a centered popover (modal-style) on the screen:

php
DriverJs::addStep()
    ->title('Welcome!')
    ->description('Let us show you around.');

Or with the quick method:

php
DriverJs::step('', 'Welcome!', 'Let us show you around.');

Changing the Target Later ​

addStep() takes the selector up front, but you can change it further down the chain:

php
DriverJs::tour('onboarding')
    ->addStep('#old-target')
        ->element('#new-target')
        ->title('Retargeted');

Useful when the selector depends on something you only work out mid-chain.

Details ​

  • The $element parameter should be a valid CSS selector that exists in your page's DOM. If the element is not found, Driver.js will display a centered popover instead.
  • The $title and $description support HTML content.
  • You can mix step() and addStep() calls in the same tour.
  • Each step's options override the global driver configuration for that step.

That's it! You're now equipped to add steps to your tours using Laravel Driver.js.