Laravel Driver.js

Appearance

Overlay Configuration ​

The overlay is the dark (or colored) backdrop that appears behind the highlighted element. Laravel Driver.js gives you full control over the overlay's appearance and behavior through fluent builder methods.

Setting the Overlay Color ​

php
DriverJs::overlayColor(string $color);

Sets the overlay color. Accepts any valid CSS color value — hex, rgb, rgba, hsl, or named colors.

Example ​

php
DriverJs::tour('onboarding')
    ->overlayColor('#1a1a2e')
    ->step('#header', 'Welcome')
    ->render();

Setting the Overlay Opacity ​

php
DriverJs::overlayOpacity(float $opacity);

Sets the overlay opacity. Accepts a float value between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 0.7.

Example ​

php
DriverJs::tour('onboarding')
    ->overlayColor('#000')
    ->overlayOpacity(0.8)
    ->step('#header', 'Welcome')
    ->render();

Setting Stage Padding ​

php
DriverJs::stagePadding(int $padding);

Sets the padding (in pixels) between the highlighted element and the stage cutout. A larger value shows more space around the element. The default is 10.

Example ​

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

Setting Stage Radius ​

php
DriverJs::stageRadius(int $radius);

Sets the border radius (in pixels) of the stage cutout around the highlighted element. A larger value creates a more rounded cutout. The default is 5.

Example ​

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

Animating Transitions ​

php
DriverJs::animate(bool $animate = true);

Enables or disables animation of the tour transitions between steps. When enabled, the overlay and popover will smoothly animate when moving between steps. The default is true.

Example ​

php
DriverJs::tour('onboarding')
    ->animate(false)  // Disable animations for a snappy feel
    ->step('#header', 'Welcome')
    ->render();

Smooth Scrolling ​

php
DriverJs::smoothScroll(bool $smooth = true);

Enables smooth scrolling to the highlighted element when it's not visible in the viewport. The default is false (instant scroll).

Example ​

php
DriverJs::tour('onboarding')
    ->smoothScroll()
    ->step('#header', 'Welcome')
    ->step('#footer', 'Footer')  // Will smooth scroll to footer
    ->render();

Allowing Close ​

php
DriverJs::allowClose(bool $allow = true);

Sets whether the tour can be closed by clicking the overlay or pressing the Escape key. Set to false to force users to complete the tour. The default is true.

Example ​

php
DriverJs::tour('mandatory-tour')
    ->allowClose(false)
    ->step('#header', 'Welcome')
    ->render();

Overlay Click Behavior ​

php
DriverJs::overlayClickBehavior(string $behavior);

Sets the action to perform when the overlay (backdrop) is clicked. Supported values: "close" (default), "nextStep", or a JavaScript callback.

Example ​

php
DriverJs::tour('onboarding')
    ->overlayClickBehavior('nextStep')  // Click overlay to advance
    ->step('#header', 'Welcome')
    ->render();

Complete Overlay Configuration Example ​

php
DriverJs::tour('onboarding')
    ->overlayColor('#1a1a2e')
    ->overlayOpacity(0.85)
    ->stagePadding(15)
    ->stageRadius(10)
    ->animate(true)
    ->smoothScroll()
    ->allowClose(true)
    ->overlayClickBehavior('close')
    ->step('#header', 'Welcome!', 'This is the header.')
    ->step('#nav', 'Navigation', 'Navigate your app.')
    ->render();

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