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.