PageGuide.js - An Interactive Guide For Web Page Elements Using jQuery And CSS3

PageGuide.js is an interactive visual guide to elements on web pages.  Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.  It's easy to implement and non-invasive.

PageGuide.js has built-in interaction tracking hooks.  This enables you to track usage of PageGuide.js via your preferred analytics tool.

Instructions To Setup PageGuide.js

Step 1 - Add pageguide.js

Add the following snippet of code to the bottom of your HTML document, right before your closing </body> tag.  PageGuide.js provides both the standard JS as well as a minified version.

Step 2 - Add pageguide.css

Add the following snippet of code to the header of your HTML document.  PageGuide.js provides an uncompressed CSS file as well as a minified version. Alternatively, PageGuide.js  provides a LESS CSS file as well.

Step 3 - Add setup code

Add the following block of JavaScript to your HTML document:

Step 4 - Choose the elements that you want included in the page guide.

PageGuide.js matches the first occurrence of the selector you specify in the <ul> you put on your pages in the next step.

Step 5 - Add the pageguide.js <ul> near the bottom of your pages.

That's it, you're now all set to view PageGuide.js in action on your page!

Requirements: jQuery
Demo: http://tracelytics.github.com/pageguide/
License: MIT License