Step

Per-Step options, placement values, and the centered variant.

A Step targets one element, or nothing at all. Every option here overrides the Tour-level value for that Step only.

Create

Component

<twig:Driver:Step :order="1" title="Title" description="Description" side="bottom" align="start">
    <div class="selector">...</div>
</twig:Driver:Step>

Twig builder

{% set tour = tour.addStep('.selector', 'Title', 'Description', 'bottom', 'start', {}) %}

PHP builder

$tour->addStep(
    element: '.selector',
    title: 'Title',
    description: 'Description',
    side: 'bottom',
    align: 'start',
    options: [],
);

In the builders, element may be null, which produces a centered Step; the component takes the host element it wraps as its target. options takes any key from the table below.

Options

Option or prop	Type	Default
`order`	`int`	`0`
`title`	`string` or trusted markup	`null`
`description`	`string` or trusted markup	`null`
`side`	`top`, `right`, `bottom`, `left`	`bottom`
`align`	`start`, `center`, `end`	`start`
`tag`	HTML tag name	`div`
`centered`	`bool`	`false`
`popoverClass`	`string`	`null`
`showButtons`	list of `next`, `previous`, `close`	`null`
`disableButtons`	list of `next`, `previous`, `close`	`null`
`showProgress`	`bool`	`null`
`progressText`	`string` or trusted markup	`null`
`nextBtnText`	`string` or trusted markup	`null`
`prevBtnText`	`string` or trusted markup	`null`
`doneBtnText`	`string` or trusted markup	`null`
`disableActiveInteraction`	`bool`	`null`
`advanceOnClick`	`bool`	`null`
`skipMissingElement`	`bool`	`null`
`waitForElement`	`int` ms	`null`
`data`	array	`null`

null means “inherit from the Tour”. showButtons and disableButtons accept only the three named values. data is passed through untouched and reappears in the detail of Hints events — for Steps it is available on the serialized step object.

Centered Step

Component

<twig:Driver:Step
    :order="1"
    :centered="true"
    title="Welcome"
    description="Start with the big picture"
/>

The component renders a <template> host, so a centered Step adds no layout element to the page.

Twig builder

{% set tour = tour.addStep(null, 'Welcome', 'Start with the big picture') %}

PHP builder

$tour->addStep(null, 'Welcome', 'Start with the big picture');

A null element and :centered="true" produce the same serialized Step.

Async targets

Twig builder

{% set tour = tour.addStep('#late-panel', 'Panel', options: {
    waitForElement: 2000,
    skipMissingElement: true,
}) %}

PHP builder

$tour->addStep('#late-panel', 'Panel', options: [
    'waitForElement' => 2000,
    'skipMissingElement' => true,
]);

advanceOnClick, waitForElement, and skipMissingElement all require Driver.js 1.8 — the floor this bundle declares anyway (Compatibility).