Add an example tour using TourGuide JS #575
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds an example tour using TourGuide JS, to test out its capabilities. The content and coding is just for testing: in no way final!
For TourGuide JS, see:
https://tourguidejs.com/
For comparison with #564.
Initially I thought otherwise, but having tried it it's now clear that TourGuide can also be used without having to make any significant changes to the original HTML (it just needs appropriate
id
s added so the elements can be refered to).Styling aside the main difference I notice with Shepherd.js is that TourGuide prevents interaction with anything on the page. In contrast, Shepherd.js allows the user to interact with the highlighted element.
Not allowing the user to interact with anything makes it easier to create the tour (no need to worry about users messing with things mid-tour), but arguably isn't as nice for the user.
Shepherd.js makes it easier to dynamically change the labels on the buttons, but I'm not sure that's going to be too important.
Unfortunately, like Shepherd.js, TourGuide also has trouble with a phone-sized display, so we'll have to figure out a solution to that in either case (e.g. disabling the tour on small-screen devices as you suggested earlier @gedankenstuecke).
Contributes to #535.