Feature: Can we show callout or step without an arrow using json configuration?

[k10world]

I was planning to work on the enhancement #84 and to do that, we need a way to hide the arrow for the callout/step.

I also came across a use case from a couple tours our PM's were planning. The last step of the tour is more of a thank you and a notification that your successful completion of this workflow will result in x. So this notification doesn't belong to any particular element in the DOM, but a general notification, placed in centered/bottom-right/top-right of the page which fades out, eventually. Again something similar to #84

Is there a way to hide the arrow, with configuration? Without hacking it together with onShow?

[k10world]

For a callout I was able to do it onShow and hide this class .hopscotch-bubble-arrow-container. A workaround not a solution.

[apitts]

Will a very large arrowOffset (e.g. 10000) not achieve this by pushing the arrow off the screen? A bit of a hack I know, but seems to be working for me...

[apitts]

Actually...it introduces a horizontal scrollbar so not ideal...

[thbar]

@k10world thanks for your commit. I'm going to try out your solution. Indeed having a way to hide the arrow would be neat, especially since at times, the arrow can give the impression that user input is expected, when maybe you do not want it.

Any plans to integrate this in master?

[sganz]

I was just going to ask for something like this. It's very useful for the start / end of a tour where you might just want a bubble centered in the screen with a Welcome or a Thanks message.

[ryanjm]

This would be very useful. I have the same use case as @sganz. I want to have a bubble at the start that doesn't point to anything.

[ghost]

I m looking for a way to hide this arrow too like @sganz and @ryanjm

[travstone]

I had the same issue, didn't see the commit above (I guess it hasn't been integrated yet).

In my own code, i'm doing this within the onShow method for a given step:

$('.hopscotch-bubble-arrow-container').css('visibility', 'hidden');

Of course, I have jQuery available, but it should be easy to do the same with vanilla js. I chose to use the visibility property, because I didn't want anything to get positioned differently than usual, but display: none; would be another option.

One thing to note is that the tour bubble gets 'regenerated' for each step so you don't need to remember to add back the arrow when you want it- but of course you have to re-hide it too if that's desired. Not perfect, but at least it's only using the library API to achieve the desired behavior. I posted a different issue a few days ago that required an actual library tweak.

Doesn't seem like there's much recent development on this project, which is a shame since it's mentioned frequently related to onboarding/product tours.

[jamespsterling]

+1 would love to see this as an option in the lib