Component for onboarding tour popovers?

[sampl]

Hey all,

Is it currently possible to combine a modal popover with a dialog-style overlay?

This is a common pattern in new user onboarding tours--admittedly an annoying one sometimes, but I think there are legit use cases.

I could probably hack it by adding a massive box shadow to a modal popover (box-shadow: 0 0 0 9999px hsla(0 0% 0% .5)) but ideally the solution would let the target appear "above" the overlay as in the examples, and even stay interactive.

Existing standalone react libs that do this:

• https://react-joyride.com/
• https://reactour.vercel.app/

Maybe this would be an optional overlay component on popover? Or if it was a new component the API might look like this (just spitballin'):

import * as TourPoint from '@radix-ui/react-tour-point';

export default () => (
  <TourPoint.Root>
    <TourPoint.Trigger />
    <TourPoint.Portal>
      <TourPoint.Overlay />
      <TourPoint.Content>
        <TourPoint.Title />
        <TourPoint.Description />
        <TourPoint.Close />
        <TourPoint.Arrow />
      </TourPoint.Content>
    </TourPoint.Portal>
  </TourPoint.Root>
);

Real world examples:

[benoitgrelard]

Hey @sampl this would definitely be cool to build. It seems the solutions you link to have a ton of cool features.

You could probably hack something around right now using Dialog and Popover, but I'm not too sure if it would be very accessible…

It seems this pattern alltogether would need quite a bit of research to see how it can be made accessible seeing that it needs to "isolate" portions of the rendered page rather than separate modal content.

But I am sure it would be possible.

Thanks for the suggestion!

✌️

[sampl]

Makes sense, thanks for your take @benoitgrelard :)

[dcastil]

I also have a need for an overlay for the popover, select, etc. from Radix. I work on an app where the CSS pointer-events: auto is used in some elements, so the modal property doesn't work as expected and doesn't disable those elements. Rendering a transparent overlay on top of the UI would also make those elements non-clickable.

[sampl]

FWIW I ended up doing this:

• Use a radix popover with modal="true"
• Add a raw div for the backdrop (not a Radix Dialog.Overlay, just a styled div) and only render it if the popover is open
• For the thing I want to appear "above" the backdrop: give it a z-index: 99999; but only when the popover is open

I can make a codepen later if yall want it

EDIT: Codepen here: https://codesandbox.io/s/festive-grass-21wlxo

[Code-Victor]

@sampl Thanks, what I wanted to know is

1. How can you make this work for various elements of your onboarding process?
2. Were you able to wrap each element you wanted to onboard individually?

[sampl]

@Code-Victor yes you can use this for multiple elements. It's controlled with React state, so you'll have to make it work with whatever your app's existing onboarding state is. Consider what flags and user data conditions you want to show the tour in. Sorry, that's as much as I can help.

[Code-Victor]

Thank you, I think I can work with that.

[itiurin-doto]

can you please share the link to codesandbox ? @sampl

[sampl]

@itiurin-doto https://codesandbox.io/s/festive-grass-21wlxo