Your product tour was probably designed on a desktop browser — but many visitors will see it on a tablet or phone. Yaplet automatically repositions tooltips to stay within the viewport, but some steps need extra attention to look right at every screen size.
How Yaplet adapts tooltips automatically
When a pointer tooltip would overflow the edge of the viewport, Yaplet flips it to the opposite side (bottom instead of top, left instead of right) so it stays fully visible. The arrow re-renders to match the new position. This happens automatically without any configuration.
Centered post steps are always viewport-centred and don't need responsive adjustments.
Breakpoints and step visibility
Each step in the tour builder has a Show on setting with three options:
| Option | Breakpoints included |
|---|---|
| All devices | Desktop, tablet, and mobile (default). |
| Desktop only | Screens wider than 1024 px. |
| Mobile and tablet | Screens narrower than 1024 px. |
Use Desktop only for steps that point to UI elements that don't exist on mobile (sidebar navigation, hover menus, keyboard shortcuts). Yaplet skips those steps on smaller screens and continues with the next visible step.
Testing on smaller screens
Use the Preview button in the tour builder to see the tour on the live URL. Then use your browser's device emulation mode (DevTools → Toggle device toolbar) to simulate tablet and phone viewports and walk through the tour at each size.
Watch for:
- Steps where the tooltip overlaps the anchor element instead of pointing to it cleanly.
- Steps whose anchored element doesn't exist at this viewport width — they fall back to a centred modal, which may be acceptable or may need to be hidden.
- Long step body text that gets clipped inside the tooltip card — shorten copy for mobile-visible steps.
Mobile-specific selectors
If the same feature uses a different UI element on mobile (a hamburger menu instead of a visible nav item, for example), you can create a separate step with a different CSS selector and set the first to Desktop only and the second to Mobile and tablet. Both steps cover the same "feature", just adapted for each context.
What's next?
If your product serves users in multiple languages, see Translate a product tour to add multilingual step content.