Laravel Driver.js

Appearance

Popover Configuration ​

The popover is the tooltip-like box that appears alongside the highlighted element, displaying a title, description, and navigation buttons. Laravel Driver.js provides fluent methods to customize every aspect of the popover.

Setting a Custom CSS Class ​

php

![The official Driver.js yellow theme applied with popoverClass()](../public/screenshots/driverjs-theme.png)
DriverJs::popoverClass(string $class);

Adds a custom CSS class to the popover wrapper element. This allows you to style the popover with your own CSS.

Example ​

php
DriverJs::tour('onboarding')
    ->popoverClass('my-custom-popover')
    ->step('#header', 'Welcome')
    ->render();

Setting the Popover Offset ​

php
DriverJs::popoverOffset(int $offset);

Sets the distance (in pixels) between the popover and the highlighted element. The default is 10.

Example ​

php
DriverJs::tour('onboarding')
    ->popoverOffset(20)
    ->step('#header', 'Welcome')
    ->render();

Showing/Hiding Buttons ​

php
DriverJs::showButtons(array $buttons);

Sets which navigation buttons to display globally. Accepts an array containing any combination of "next", "previous", and "close". The default is ["next", "previous", "close"].

Example ​

php
// Show only Next and Close (hide Previous)
DriverJs::tour('onboarding')
    ->showButtons(['next', 'close'])
    ->step('#header', 'Welcome')
    ->render();

Disabling Buttons ​

php
DriverJs::disableButtons(array $buttons);

Visually disables specific buttons (they appear greyed out but are still visible). Accepts an array containing any combination of "next", "previous", and "close".

Example ​

php
// Disable the Previous button on the first step
DriverJs::tour('onboarding')
    ->disableButtons(['previous'])
    ->step('#header', 'Welcome')
    ->render();

Showing Progress ​

php
DriverJs::showProgress(bool $show = true);

Shows or hides the "X of Y" progress indicator in the popover footer. The default is false.

Example ​

php
DriverJs::tour('onboarding')
    ->showProgress()
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->step('#footer', "That's it!")
    ->render();

Setting Progress Text ​

php
DriverJs::progressText(string $text);

Sets the progress text template. Use and as placeholders. The default is " of ".

Example ​

php
DriverJs::tour('onboarding')
    ->showProgress()
    ->progressText('Step {{current}} of {{total}}')
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->render();

Step-Level Popover Configuration ​

Each step can override the global popover configuration. Use the step builder methods to customize individual steps:

php
DriverJs::addStep('#header')
    ->title('Welcome!')
    ->description('The main header.')
    ->side('bottom')
    ->align('center')
    ->popoverClass('header-popover')
    ->showButtons(['next', 'close'])
    ->showProgress(true)
    ->nextBtnText('Continue')
    ->doneBtnText('Finish');

DriverJs::addStep('#nav')
    ->title('Navigation')
    ->description('Use these links.')
    ->side('right')
    ->align('start')
    ->disableButtons(['previous']);

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

Complete Popover Configuration Example ​

php
DriverJs::tour('onboarding')
    ->popoverClass('my-tour-popover')
    ->popoverOffset(15)
    ->showButtons(['next', 'previous', 'close'])
    ->disableButtons([])
    ->showProgress()
    ->progressText('Step {{current}} of {{total}}')
    ->nextBtnText('Continue →')
    ->prevBtnText('← Go Back')
    ->doneBtnText('Get Started!')
    ->step('#header', 'Welcome!', 'This is the header.')
    ->step('#nav', 'Navigation', 'Navigate your app.')
    ->step('#footer', "That's it!", "You're ready!")
    ->render();

That's it! You're now equipped to configure popovers using Laravel Driver.js.