Multiple steps in the same tooltip wrapper

[caiaga]

I'm currently looking at a tours implementation similar to the one in this example: https://dribbble.com/shots/5823278-Onboarding-Tour
I.e. a tour that is contained in a wrapper, with static header/content/footer areas. The closest I can see in the examples is the carousel one (https://react-joyride.com/carousel), but instead of showing the tooltip below the carousel I want a combination of both, i.e. the text in the tooltip should be right under the carousel image in the same container, and all paging/skip actions underneath.

I tried to implement this by using a custom tooltip component that contains a dialog box with header/content/footer areas as outlined in the CustomComponent example (https://github.com/gilbarbara/react-joyride-demo/blob/main/src/CustomComponents/index.tsx#L299).
Unfortunately, I'm running into an issue with the full tooltip component re-rendering, as opposed to only parts of it - i.e. just the content of the custom component based on props state changes.
This results is that the Dialog component fully re-renders for every step which leads to a lot of flicker.

I have not found any documentation around this being possible at all, so I want to check if I'm overlooking anything. I found the continuous and disableBeacon props which from my understanding would only allow skipping the beacons between individual tour steps. I'm unable to get them to work, however - I always run into undefined issues in the JoyrideStep.componentDidUpdate function at the lifecycle event for LIFECYCLE.TOOLTIP:
TypeError: Invalid parameter: element must be an HTMLElement

Any ideas are greatly appreciated!

[gilbarbara]

Hey @caiaga

I've never tried to have this configuration with Joyride, but the re-render you mentioned would happen since each step would render for different parts of the page.
I think a simple carousel in a modal would be more suitable for your case.