Hints

Group options, per-Hint options, and the eight controller actions.

Hints use the separate driver.js/hints entrypoint and the pentiminax--ux-driver--hints controller. For the introduction, see Hints. Every option below can be set in all three authoring forms.

Create

Component

<twig:Driver:Hints id="orders-help">
    ...
</twig:Driver:Hints>

Twig builder

{% set hints = create_hints('orders-help') %}

PHP builder

$hints = $hintsBuilder->create('orders-help');

HintsBuilder is an autowired service — type-hint it in a controller and Symfony injects it. The id is required and is what ux_hints_action() targets.

Add a Hint

Component

<twig:Driver:Hint hintId="filters" title="Filters" description="Narrow the list first">
    <button type="button">Filters</button>
</twig:Driver:Hint>

Twig builder

{% set hints = hints.addHint('.filters', 'filters', 'Filters', 'Narrow the list first') %}

PHP builder

$hints->addHint(
    element: '.filters',
    id: 'filters',
    title: 'Filters',
    description: 'Narrow the list first',
    side: 'bottom',
    align: 'start',
    options: [],
);

Group options

Option or method	Type	Default
`autostart`	`bool`	bundle `true`
`beacon` / `beacon()`	`{side, align, animate, className}`	Driver.js default
`buttonText` / `buttonText()`	`string` or trusted markup	Driver.js default
`popoverClass` / `popoverClass()`	`string`	none
`popoverOffset` / `popoverOffset()`	`int`	Driver.js default
`overlay` / `overlay()`	`bool`	Driver.js default
`overlayColor` / `overlayColor()`	`string`	Driver.js default
`overlayOpacity` / `overlayOpacity()`	`float`	Driver.js default

autostart is the one option with no builder method: pass false as the second argument to ux_hints(hints, false), or set :autostart="false" on the component.

Hint options

Option or prop	Type	Default
`hintId` / `id`	`string`	Driver.js falls back to the index
`element`	selector or DOM element	required in the builder; the component host in Twig
`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`
`beacon`	`{side, align, animate, className}`	group value, then Driver.js default
`popoverClass`	`string`	`null`
`showButton`	`bool`	Driver.js default
`buttonText`	`string` or trusted markup	group value, then Driver.js default
`data`	array	`null`

Beacon side and align take the same values as the Hint’s own. Give every Hint an explicit hintId if anything targets it by action — the index fallback shifts whenever the group changes.

Actions

Action	Effect	Param
`show`	Resolves the hints and shows every beacon	none
`hide`	Removes every beacon	none
`open`	Opens one Hint’s popover	`hintId`
`close`	Closes the open popover, keeping the beacons	none
`dismiss`	Retires one beacon	`hintId`
`restore`	Brings one dismissed beacon back	`hintId`
`restoreAll`	Brings every dismissed beacon back	none
`refresh`	Recomputes beacon positions	none

ux_hints_action() prints the matching data-action (and hintId param when needed):

<button {{ ux_hints_action('restore', {hintId: 'export'}) }}>
    Restore export hint
</button>

restoreAll calls Driver.js restore() for every Hint, using the id when present and the zero-based index when it is not.

Stimulus reference — the same actions alongside the Tour controller, plus events.
Styling and localization — beacon CSS variables and buttonText.