Multi Route – Want to show multiple tooltips with a single route.

[Rajatkumarbehera]

Hello, @gilbarbara !!!

Can we show multiple tooltips with a single route?
If yes, could you please guide me how can we do this?

Thank you.

[gilbarbara]

Hey @Rajatkumarbehera

You can't do that with react-joyride. It's based on multiple steps with a single target per step.
However, it uses the react-floater library to render the steps, and you could use it to render multiple tooltips simultaneously.

[gilbarbara]

Hey @yadavalok1
There's a demo link in the react-floter README

[yadavalok1]

Thanks for the quick response @gilbarbara. I am using react joyride and trying to do something like this.

<JoyRide {...tourState} callback={callback} showSkipButton={true} scrollToFirstStep={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, options: { zIndex: 2000, }, floaterProps: { styles: { arrow: { color: "red", } } }, }} locale={{ last: "End tour", }} > </JoyRide>

But it seems the floaterProps is not working and after some debugging I got this line of code that may be responsible. I am not sure , so can you please guide me on this?

[gilbarbara]

Is this related to multi-route?
Not sure I understand your problem...
Is the arrow color? If it is, check the styling docs.

[yadavalok1]

Yeah I want to customize the arrow style, like the length, width but I just found arrowColor to change color and also I got the floaterProps but still the customization is limited , so is there any way of customizing the arrow as per our need or only that much customization we can do?

[gilbarbara]

So, it's not multi-route related...
Yeah, you can change the length, spread, and some other CSS properties, like color or border, but there's no way to change the SVG data.