React-joyride: Step options

[int13h]

Is there a way to disable the arrow for a particular step?

[przhkv]

For steps there's no such stylesheet option now. I need it too and think that it's a good idea.
I would like to implement it also if the author agrees with idea.

P.S. It is possible to remove arrow completely with sass by rewriting $joyride-tooltip-arrow-size variable or with css by doing something like:

.joyride-tooltip__triangle {
  width: 0 !important;
  height: 0 !important;
}

[IanVS]

On the Nutshell fork, we made a change to allow styling the arrow: https://github.com/nutshellcrm/react-joyride/commit/14db0e92edb06050383db3d5eb95133ad58353a6. @gilbarbara, do you think that would be worth a PR?

[gilbarbara]

@IanVS The arrow is a base64 svg graphic and there's not much styling you could do with it in the current form, only hiding it. I will try to add this option and make some tests to see if it works.

[IanVS]

Yeah, all we're doing with it is hiding it, but that works for us.

I think another option would be to allow positioning the tooltip somewhere on the page (at a fixed position) without a selector or an arrow. That's a bigger change, though. But, it could be useful for "general" tooltips that don't need to be attached to a particular element, and can just be shown in a corner of the viewport.

[gilbarbara]

@IanVS like a toast? There are plenty of libraries that do that..

[IanVS]

Not exactly a toast, no. My use case is for a joyride which explains an entire app, and spans several pages. After transitioning to a new page, I want to have a "This is the X page, where you can find Y" type of explanation. Clicking "Next" then calls out an element on the page with an anchored tooltip. It would be difficult to hook some other kind of library into this role.

I've found a way to work around this for now, but I'm curious if anyone else would find value in this kind of option. It seemed like it might be related to this original issue request. But, maybe not.

[gilbarbara]

@IanVS Cool, we can talk more about this later. 👍

[stephenrs]

Hi, I'm trying to implement the same use case as others have mentioned, which lead me to find this issue (as well as #74). For some more complex tours, you might want to say something to a user that isn't directly related to a UI element, but still presented to the user as a step in the tour.

Sure, you could use a separate modal component for this, but that would be pretty clunky and awkward to maintain. @gilbarbara Is there as philosophical reason you're not interested in this use case?

I'd be happy with just being able to set the color of the arrow, to be able to at least mask it in some way. However, while setting individual step styles on elements like 'tooltip' and 'tooltipContainer' works, setting {floater: {arrow: {color: #myColor}}} unfortunately does not.

[Lizi3107]

There is a very simple way that disables the arrow and I think it is very useful for the first step of your joyride, since you may need to just give general information about your project in your first tooltip. In "steps" object, get body as the target and set placement to "center". That worked for me :)

[o-faro]

It is possible to hide the arrow by setting
<Joyride floaterProps={{hideArrow: true}} ... />
if using typescript
<Joyride floaterProps={({hideArrow: true} as unknown) as FloaterProps} ... />