Laravel Driver.js

Appearance

Step Positioning ​

Laravel Driver.js provides convenient methods to control where the popover appears relative to the highlighted element and how it aligns on that side.

Side Positioning ​

Set the side where the popover appears relative to the highlighted element. Available options: "top", "right", "bottom", "left", "over".

Method Signature ​

php
$step->side(string $side);

Shortcut Methods ​

Instead of calling side('top'), you can use these convenient shortcut methods:

php
$step->top();      // Position popover on top of the element
$step->right();    // Position popover on the right
$step->bottom();   // Position popover on the bottom
$step->left();     // Position popover on the left
$step->over();     // Center on screen, detaching the step from its element

Example ​

php
use RealRashid\LaravelDriverJs\Facades\DriverJs;

DriverJs::addStep('#nav')
    ->title('Navigation')
    ->description('Use these links to navigate.')
    ->right()
    ->alignStart();

Alignment ​

Set the alignment of the popover on the chosen side. Available options: "start", "center", "end".

Method Signature ​

php
$step->align(string $align);

Shortcut Methods ​

php
$step->alignStart();   // Align to the start
$step->alignCenter();  // Align to the center
$step->alignEnd();     // Align to the end

Example ​

php
DriverJs::addStep('#sidebar')
    ->title('Sidebar')
    ->description('Your tools and shortcuts.')
    ->side('right')
    ->align('start');

Combined Example ​

php
DriverJs::tour('onboarding')
    ->step('#header', 'Header', 'The main header', ['side' => 'bottom', 'align' => 'center'])
    ->step('#nav', 'Nav', 'Navigation links', ['side' => 'right', 'align' => 'start'])
    ->step('#sidebar', 'Sidebar', 'Tools area', ['side' => 'left', 'align' => 'end'])
    ->render();

Details ​

  • The over() side positions the popover in the center of the screen with no arrow pointing to any element, which is useful for modal-style popovers. Note that side: "over" is not a native Driver.js option — Driver.js only accepts top, right, bottom and left. Centering is triggered by a step having no element, so over() clears the step's element and the package omits the unsupported side value from the output.
  • The default side is determined automatically by Driver.js based on available viewport space — it picks whichever side gives the popover the most room. There is no fixed default.
  • The default alignment is "start" as per Driver.js defaults.

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