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.
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.
More into addition of the list we can use lightweight library https://github.com/heelhook/chardin.js
来源：https://stackoverflow.com/questions/23363529/client-side-feature-tour-tutorial-instructional-overlay-system