jQuery Plugin on-screen-help

This is my first more reusable jQuery plugin. It creates a step by step tutorial for your web page. With this plugin you can present the user your web site through predefined steps with your own description. By using css3 transitions you will have a cool user experience in modern browsers.

Already bored? Watch the demo!

Each step has a targeted element that is highlighted when the step get’s activated imageso there is little possibility for distraction by other page elements. Also the user can directly call the tutorial step by clicking the marked zone.

All steps can have their own description box which contains the text or html content you would like to present. The position of this description box is configurable through the steps setting.

You can navigate through the steps with the left and right arrow key and close the help through ESC key. Yes, next thing to add would be a close button. Done

It’s still in an early phase but already quite useful. I’ve tested it with latest Chrome and Firefox so far. No CSS transitions for IE 9, so no animation there. Time goes by…

Any help or suggestion for improvement is welcome!

Watch Demo

GitHub Repository


  1. Bisher keine Kommentare.
(wird nicht veröffentlicht)