UX Driver

Type to search Tours, Hints, options, and events.

↑↓ to navigate · Enter to open · Esc to close

Documentation

Hints

Add contextual beacons with Twig Components, the Twig builder, or the PHP builder.

A Tour interrupts; a Hint waits. Hints put a small beacon next to a control and open a popover when someone asks for it — the right shape for help that should outlive onboarding.

Component

<twig:Driver:Hints id="orders-help" buttonText="Done" :overlay="true">
    <twig:Driver:Hint hintId="filters" title="Filters" description="Save time by narrowing the order list first">
        <button type="button">Filters</button>
    </twig:Driver:Hint>

    <twig:Driver:Hint hintId="export" title="Export" description="Download the current view as a CSV" side="left">
        <button type="button">Export</button>
    </twig:Driver:Hint>
</twig:Driver:Hints>

Twig builder

{% set hints = create_hints('orders-help')
    .addHint('.filters', 'filters', 'Filters', 'Save time by narrowing the list first')
    .addHint('.export', 'export', 'Export', 'Download the current view as a CSV', 'left')
    .buttonText('Done') %}

<div {{ ux_hints(hints) }}></div>

PHP builder

use Pentiminax\UX\Driver\Builder\HintsBuilder;

public function __construct(private readonly HintsBuilder $hintsBuilder)
{
}

public function index(): Response
{
    $hints = $this->hintsBuilder->create('orders-help')
        ->addHint('.filters', 'filters', 'Filters', 'Save time by narrowing the list first')
        ->addHint('.export', 'export', 'Export', 'Download the current view as a CSV', side: 'left')
        ->buttonText('Done');

    return $this->render('order/index.html.twig', ['hints' => $hints]);
}

HintsBuilder is autowired like TourBuilder. The template only prints the controller attributes:

<div {{ ux_hints(hints) }}></div>

Showing and hiding

The Hints group is driven by the pentiminax--ux-driver--hints controller. ux_hints_action() prints the trigger:

<button {{ ux_hints_action('show') }}>Show hints</button>
<button {{ ux_hints_action('hide') }}>Hide hints</button>
<button {{ ux_hints_action('close') }}>Close the open popover</button>

<button {{ ux_hints_action('open', {hintId: 'filters'}) }}>Open the filters hint</button>

hide removes every beacon; close only closes the popover that is open. To retire a single beacon, or bring it back, use dismiss and restore — all eight actions and their parameters are listed in the Hints reference.

Next