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.

Answer 1

感谢约翰逊为我提供了一个很好的术语(没有荒谬的误报).

以下是我发现的"功能导览"解决方案列表:

• 兜风| http://zurb.com/playground/jquery-joyride-feature-tour-plugin
• Intro.js | http://usablica.github.io/intro.js/
• 跳房子| http://linkedin.github.io/hopscotch/
• 崩溃| http://blog.tommoor.com/crumble/
• Pageguide | http://tracelytics.github.io/pageguide/
• Bootstro.js | http://clu3.github.io/bootstro.js/

我相信还有更多.这些解决方案可以使开发人员更容易为用户实现更好的功能介绍.

Answer 2

除了列表之外,我们还可以使用轻量级库 https://github.com/heelhook/chardin.js