[Feature Request] These enhancements would be nice to have: 'Esc' and click to close, prevent interaction, parent autoScroll, reimplement backdrop.

[schutze]

It would be nice if these enhancements were introduced:

• An option to stop the tour if the 'Esc' key is pressed.
• An option to stop the tour if the backdrop is clicked.
• An option to prevent interaction with the highlighted area while the tour is active.
• A parent element is needed so autoScroll works better.
• The backdrop uses multiple divs and seems overly complicated. Implementing what Intro.js has would make a rounded corner highlight area possible.
• As per #672, fix the backdrop so it remains displayed between steps.

[IGreatlyDislikeJavascript]

I'm not the maintainer of this master, but my fork solves some of these. I'll fix and add things I specifically need for my use, but I'm not looking to take on full maintenance of this!

• An option to prevent interaction with the highlighted area while the tour is active.

My fork has preventInteraction option to do exactly this.

• The backdrop uses multiple div

Can you explain more? I'm not a web designer, can barely use css and I hate JavaScript, so I'm not sure exactly what intro.js is doing or how it's doing it. You're right that the original Tour uses 4 divs to create a square bracket around the highlighted element, but due to my lack of web design knowledge I don't know how you'd produce the same effect any other way.

If you can explain in simple terms how intro.js does the overlay with rounded corners (eg the css and dom elems to use), I can look at implementing it if it's not too much work and is useful for me.

• An option to stop the tour if the backdrop is clicked

I can add this, I need it too. Would the option just end the tour, or would it call a definable func etc?

• A parent element is needed so autoScroll works better.

Please can you explain? Auto scroll works fine for me, but maybe there's some bug/issue I haven't found yet.

[IGreatlyDislikeJavascript]

One additional comment. I implemented a fix to keep the backdrop visible between steps, but I've removed it due to UX issues.

Essentially although the idea makes sense, it looks weird.

When the tour next button is clicked, the popover transitions as normal - fade out, delay, appear.

If the background remains in place, it is bracketing the element from the step that's being hidden. So the effect is basically that the pop over transitions out, and you're left with the gray overlay bracketing the element, until the next step is shown. This looks slightly weird.

As soon as you add a delay into the step (using master delay or fork delayElement), you have a square of uncovered window sitting for an arbitrary period. This looks mega weird. Worse, the user can interact with that uncovered square (I.e.: the element of the step being hidden) until the next step is shown / delay expires, which can potentially screw the tour flow depending on your app code.

Even worse than that, if the element is hidden when the tour step is hidden ("click this button once, it will disappear"), then the user is left sitting for an arbitrary amount of time with the entire window blocked except for a square of white space where the element used to be.

So although all those make sense from a code view, they are horrible from a UX view because it really feels like the tour is buggy or broken.

So this doesn't work for me, at least.

[schutze]

Thanks for your replies @IGreatlyDislikeJavascript but I've given up on using this plug-in and switched to Intro.js. There are still a few shortcomings but overall it looks and works better for me.

[ibastevan]

@IGreatlyDislikeJavascript Well done and thanks for creating this fork you have done a fantastic job! I know this is an old post but i have recently began testing out your fork and came in to this backdrop issue.

With regards to this backdrop issue remaining between steps, have you thought about a fade in/out transition effect between steps instead? So, rather than the backdrop disappearing abruptly, it could slowly fade out while the next backdrop is slowly fading in. Could possibly be more subtle and work well?

Kind regards

Stevan

[IGreatlyDislikeJavascript]

@ibastevan thanks for your feedback! Rather than clog up this repo with discussion that only applies to my Tourist fork, I've opened this in my repo:

https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist/issues/23

I've put a temporary solution in there too, to get opinions.