Client-side "Feature Tour" (tutorial/instructional) overlay system?

Question

Is there a system/framework in existence which focuses on providing tutorial / help like overlays in the browser?

Example: You have a webapp which requires a certain level of instruction to the user. In this instruction process you wish to "highlight" (e.g. arrow, colour shading, pulsing border, etc) a certain element on the page, with an accompanied message.

This would be a true overlay, so it would function only in absolute positioning, and not interfere with the existing layout.

I'm looking for an existing solution, before I consider rolling my own.

Solution 1

Thanks to Johnson for giving me a good term to Google with (sans ridiculous false positives).

Here is a list of "feature tour" solutions I've found:

• Joyride | http://zurb.com/playground/jquery-joyride-feature-tour-plugin
• Intro.js | http://usablica.github.io/intro.js/
• Hopscotch | http://linkedin.github.io/hopscotch/
• Crumble | http://blog.tommoor.com/crumble/
• Pageguide | http://tracelytics.github.io/pageguide/
• Bootstro.js | http://clu3.github.io/bootstro.js/

I'm sure there are more out there. These solutions can make it far easier for a developer to implement better feature introductions to users.

Solution 2

More into addition of the list we can use lightweight library https://github.com/heelhook/chardin.js

Comments

[Johnston]

you mean like zurb.com/playground/jquery-joyride-feature-tour-plugin

[Spot]

@Johnston Yes, thank you. Do you know of any alternatives?

[César León]

This is also know as "coach mark". In case it is useful to someone.

[Alex Parloti]

For someone looking for more current resources use the keywords "Instructional Overlay" or "Coach Marks" to avoid false positives.

[Frank Phillips]

Some other google-foo words are Instructional Overlay and Coach Marks.

[llernestal]

Another one to add to the list: Trip.js

[awidgery]

Serious +1. This is why closing questions asking for a library that can do something is so annoying...

[Josh.F]

also github.com/heelhook/chardin.js

[Dragonborn]

bootstraptour.com

[Daniel Hume]

Note to anyone else who might stumble across this: Joyride is really easy to use but only if you don't download the version that is linked from the homepage, because it doesn't correspond to the instructions on the page. Instead go to their github and grab the v2.1.0 release, which also contains working demo code. The "latest" version, which seems to be mistakenly labelled 2.0.0, has been heavily refactored and doesn't come with any demo or documentation, so I couldn't make head or tail of it.

[Nick Steele]

Most of these don't work on mobile or are depreciated/not maintained. How do all the big companies get attractive instructional/walkthroughs?

[Alan Dong]

Add another one I helped wrote: github.com/svkangal/ember-tutorial-component, it's an ember-addon and built for Ember though.

[Dexter]

The best one is intro.js. It got beautiful design.

[Dexter]

say, if i implement this in my login systems like ERP and i give the user a tour, Once the user through with the tutorial how do i stop showing again. What if i want only once.