You built the tour on a wide screen, pointing at a sidebar and a toolbar. On a phone the sidebar is behind a hamburger menu and the toolbar is gone. This article covers what happens then, and what you can do about it.
What Yaplet handles by itself
- It checks whether the element is actually visible. A hidden element counts as missing for the recovery steps below — the extra selectors, the fallbacks and Skipped if hidden all look for a visible element. With none of those set up, a step anchors to its element even when it is hidden.
- It re-checks on resize. If the window changes size mid-step and a better matching element becomes visible, the tooltip moves to it.
- Post steps need nothing. A card in the middle of the screen looks the same at every width.
What you set up per step
There is no "show this step on desktop only" switch. Yaplet gives you three tools instead, and you combine them:
| Tool | What it does | Use it when |
|---|---|---|
| Extra selectors | More ways to describe the same thing. Yaplet takes the first one that is visible. | The feature exists on both layouts but is a different element — a nav item on desktop, a menu row on mobile. |
| Fallback steps | Whole alternative versions of the step, tried in order. One that points at nothing always works. | The point still needs making on a phone, but there is nothing sensible to point at. Explain it in a centered card instead. |
| Skipped if hidden | Drops the step entirely and moves to the next one. | The step is meaningless on a phone — a keyboard shortcut, a hover menu, a drag-and-drop area. |
Without any of these, a step whose element is missing from the page appears in the middle of the screen with nothing highlighted, and a step whose element is on the page but hidden anchors to it anyway — so the tooltip ends up somewhere unhelpful. Both are safe failures, neither is a good experience.
Testing at a small size
- Open your site in a normal browser tab.
- Open the developer tools and turn on device emulation (in most browsers, the small phone-and-tablet icon).
- Pick a phone size and trigger the tour the same way a visitor would — by loading a start page, or by firing your custom event.
- Step through the whole tour and note every step that misbehaves.
What to watch for:
- A tooltip that covers the very element it is describing.
- A step that lands in the middle of the screen with nothing highlighted — that element is missing or hidden at this width.
- Body text too long for a narrow card. Shorten it; the same text is used at every size.
What's next?
Extra selectors and fallbacks are set up per step in the builder — the mechanics are in Anchor tour steps to UI elements.