Is there any way to tell the component where to create the tour elements instead of it automatically being created at the end of the body?

[kintz09]

Hello! I recently discovered this wonderful package and I've just finished implementing a few product tours in my React web application. However, I am now running into an issue with the component when our app is fullscreen and need help finding a solution.

Our React application is designed to be embedded into other webpages. We offer functionality to go into fullscreen mode within our application. When we do this, we don't bring the entire webpage into fullscreen. We take our app's parent container into fullscreen.

I've noticed that the react-joyride elements always get created inside Body before the closing tag. Therefore, if we are in the middle of our tour and the user jumps into fullscreen mode, the joyride elements don't come with us. And similarly, if we are in fullscreen when we initialize the tour, the joyride elements aren't visible because they are not a child of the element we brought into fullscreen.

I looked through the documentation and issues for react-joyride and react-floater to see if this has been addressed already, but I didn't find anything.

Is there an existing way to tell the component where it should create itself? If not, could we add a new prop to react-joyride that accepts a reference or similar of the parent element where we want the react-joyride elements to be created?

Any help or suggestions would be greatly appreciated. Please let me know if there any other information I can provide to help.

[gilbarbara]

Hey, There's no way to do that right now. I'll need to upgrade react-floater package to support it. I'll work on it when I have some spare time

[github-actions[bot]]

Stale issue message

[a-pachkov]

Hello! Great library, thank you! I also running into an issue when red marker try to follow clipped element:

And this feature may solve my issue too Or maybe there exists another way to clip that marker

[gilbarbara]

@a-pachkov You can change the z-index to prevent that behavior

[a-pachkov]

@gilbarbara Thank you for the replay! Sure I can manage this issue with right z-index on header and horizontal menus But in this case I'll need to set different z-index for each marker depending on place and clip elements around this place For example I'll need this marker in header or in pop-up window So it can add a lot of mess in the code and the pain of maintaining it But anyway thank you!

[gilbarbara]

@a-pachkov

So it can add a lot of mess in the code and the pain of maintaining it

Now imagine that in a library used by thousands! 😀

[Astra-RX]

When to upgrade embedded react-floater to support this?

[sebass]

Same issue here.. Would be nice to have a solution for this.

[madiyetov]

This issue is preventing from customizing a tooltip, since all the classes are inside shadow dom. Would be great to have a prop for rendering the tooltip in a custom DOM element. I guess the portalElement of react-floater should work here, no? @gilbarbara

[gilbarbara]

Hey @madiyetov I'm not sure what you mean by shadow dom. You can have a fully customizable tooltip with the tooltipComponent prop.

Yes, but this package will need a lot of work to be compatible with the latest react-floater. I'll work on it when I have some time.

[madiyetov]

@gilbarbara, yep, I've tried to pass the customized tooltip. The thing is, it might have css styles (3rd party design system components for example) that are hidden inside a shadow DOM. So by rendering the customized tooltip into global body element, we won't apply these hidden css to the customized tooltip. I would use the portalElement to render the tooltip inside the shadow DOM where all css styles are located.

But right now, I've just changed the tooltip with styles props and seems enough for me.

[NicerDicerPro]

Hi @gilbarbara I saw you started working on this in the next branch. I cloned the branch, packaged the code and installed it into my local instance of my application. Once i add the ShadowDOM Element as portalElement i got a "Maximum call stack size exceeded" error on the current state of the "next" branch (as its still work i suppose).

Is there any estimation when you will be able to finish this feature?

Is there any way i can help? We would really like to use JoyRide in our application, but because of a wide mix of technologies we need to make it work within a ShadowDOM.

[gilbarbara]

Hey @NicerDicerPro

The portalElement is done, and it supports string | null | HTMLElement.

How are you selecting the ShadowDOM Element? I'm not planning on adding ShadowDOM support, as I'm not very familiar with it, but if you could help out with some code to get started, it would be great. StackBlitz or Codesandbox.

[NicerDicerPro]

Good Morning @gilbarbara

So basically what were trying to do, is creating a ShadowDOM with a "rootElement" (which is just a div) inside it. We then want to use this div as the portalElement.

From what we found out, in /modules/step.ts at line 45 the code calls getStyles (https://github.com/gilbarbara/react-joyride/blob/next/src/modules/step.ts#L45) which then tries to deepmerge step.floaterProps with floaterProps (https://github.com/gilbarbara/react-joyride/blob/next/src/styles.ts#L37). Both of those objects contain the portalElement as a HTMLELement. deepmerge now proceeds to deepmerge the HTMLElement with all its properties resulting in a Maximum call stack sie exceeded error. Maybe the portalElement should not be deepmerged? Im not sure, but maybe this information helps you figuring out whats causing the crash.

Ive created a MRE in StackBlitz here: https://stackblitz.com/edit/vitejs-vite-wvgux6. Also, just cause i dont have a StackBlitz Account, i'll add the StackBlitz as a ZIP File to this comment. You might have to npm remove react-joyride and npm install ./react-joyride-2.9.3-next to get the local package installation running, not sure if StackBlitz properly resolves this (it worked for me when i built it, but it didnt when i reopened the link).

vitejs-vite-wvgux6.zip

Hope this helps.

Best Fabian