Client-side “Feature Tour” (tutorial/instructional

问题:

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.

回答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.

回答2:

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