Dynamic targets

Real applications render late, re-render often, and sometimes never show the element a tour expects. Each step declares what should happen in that case, and waiting is driven by a mutation observer rather than a polling timer.

Waiting for an element that does not exist yet

Start the tour, then reveal the panel. The second step is waiting for data-bonboarding-anchor="late-panel" and picks it up the moment it appears.

Missing-target strategies

Each button runs a two-step tour whose first step points at an element that is not on this page. Only the strategy differs.

Let the user do it

A step with an BonboardingAdvanceTrigger waits for a real interaction. The overlay becomes click-through around the target automatically, so the user can actually press the button they are being told about.

Targets chosen at run time

BonboardingStepTarget.Dynamic defers the decision until the step activates, so a tour can point at whichever row, tab or card is relevant right now.

new BonboardingStepDefinition
{
    Target = BonboardingStepTarget.Dynamic(context =>
        BonboardingStepTarget.Anchor($"row-{context.State["selectedRow"]}")),
    Title = "The row you picked",
}