Retool SaaS product walkthrough in-app overlay functionality

🤝 Community Show & Tell
1


Wanted to share a cool feature that me and some of the other teammates at BT made for one of our clients that’s creating their SaaS product on Retool.

We baked in a native Retool flow that allows you to self serve a guide into your product in Retool. You can use it for new feature launches, guided onboarding or whatever you want.

Here is the link if you want to take a look.

10 Likes
2

:fire: Dope @Milan_Kalem
It took me some time to figure out that I had to press ESC, but apart from that it is really cool.
Would you be open to share some implementations details?

3

Very cool - would love to learn more about the "native Retool flow" that you used to implement it.

4

My colleague and I we're just talking about how we could build a feature like this in Retool during lunch!

I would be very interested to learn more about how you achieved this :bulb:

5

Circling back on this after a bit of a gap :face_with_peeking_eye:

Walk through on how to dim the background and overlay interactive tooltips step by step.

  1. Create a Full-Screen Modal

  • Add a Modal component.

  • Set Size → Full Screen.

  • Set Background Color → Transparent.

This ensures the tutorial overlays the main UI while keeping the background visible but dimmed.

  1. Replicate the Main UI Inside the Modal

  • Copy the Container(s) from the main canvas.

  • Paste them inside the modal to mirror the UI.

  • These are “ghost” copies used to highlight sections without affecting functionality.

  1. Create a Step-by-Step Guide
  • Define a Retool Variable tourSteps to store tutorial steps:
[
{ step: "delivery", label: "Delivery Options", description: "Set your delivery preferences here — choose your delivery address and time." },
{ step: "address", label: "Set Address", description: "Tap to enter a new one or choose from saved addresses." },
{ step: "search", label: "Search for Items", description: "Type in the search bar to quickly find groceries, restaurants, or products." },
{ step: "cart", label: "Your Cart", description: "Review your added items and proceed to checkout." },
{ step: "categories", label: "Browse Categories", description: "Explore groceries, drinks, snacks, and more." },
{ step: "promo", label: "Promotions", description: "See the latest personalized offers and deals." },
{ step: "filters", label: "Filter Options", description: "Refine searches by price, dietary needs, and delivery time." },
{ step: "features", label: "Featured Items", description: "Discover hand-picked items or restaurants." }
]
  1. Track the Current Step
  • Create a Variable currentStepIndex (default 0) to track progress.
  1. Create a Query to Move Between Steps
  • JS Query → changeStep
let nextIndex = currentStepIndex.value + 1;

if (nextIndex >= tourSteps.value.length) {

nextIndex = 0; 

}

currentStepIndex.setValue(nextIndex);

  • Each click increments the index, moving to the next step.

  • Resets to 0 when finished.

  1. Display a Tooltip for Each Step
  • Use a Text Component with Markdown + Custom CSS to show dynamic tooltips:
<div style="background-color:#E0F7FA; border-left:4px solid #00ACC1; padding:16px; font-size:18px; border-radius:16px; margin-bottom:12px; line-height:1.6;">

đź’ˇ <b>{{ tourSteps.value[currentStepIndex.value]?.label }}</b><br>

<em>{{ tourSteps.value[currentStepIndex.value]?.description }}</em>

</div>
  1. Show the Correct UI Section at Each Step

  • Delivery Section → {{ currentStepIndex.value != 0 }}

  • Address Section → {{ currentStepIndex.value != 1 }}

  • Search Section → {{ currentStepIndex.value != 2 }}

  • Cart Section → {{ currentStepIndex.value != 3 }}

(etc…)

  1. Make the Tutorial Interactive

  • Clicking anywhere inside the modal runs changeStep.

  • Each click moves to the next step.

  • The tooltip & UI change accordingly.

  1. Final Step: Maintain Layout Consistency

One important setting that ensures a smooth, natural transition between tutorial steps is enabling “Maintain space when hidden” for all replicated components inside the overlay modal.

By default, when a component is hidden in Retool, the layout shifts because the hidden component collapses, affecting the positioning of other elements.

With “Maintain space when hidden” enabled:

  • The hidden component still takes up space, ensuring all elements stay aligned.

  • The overlay tutorial UI perfectly matches the real UI beneath it.

  • No weird jumps between steps - each feels smooth & intentional.

For each replicated component inside the modal:

  • Select the Component (Text, Button, Input, etc.).

  • Go to Advanced Settings in the Appearance section.

  • Check “Maintain space when hidden”.

This approach isn’t meant for heavy use or complex screens, but it’s a handy trick for quick in-app tutorials using just Retool components.

Hope this helps! :sunny:

3 Likes