KingTour - Royal On-Page Tours
You can make screenshots, movies or write a manual for your web app .. OR go for on-page tutorials.
On-Page tutorials, as the name suggests, live directly in your app. A user clicks his way through the web-application while reading your help bubbles
A KingTour can serve as:
Getting started tour
Documentation with video and images
Show-case your app within a demo account
just about anything you can imagine, as long as it's html
See example here: salesking.github.com/king_tour/
Look into the source and use firebug to get a grasp of it .. as long as the docs are sparse :-)
A tour is a div, identified by its id attribute. For each tour step the main tour wrapper contains divs with the real bubble content. The content can be any html.
Setup KingTour with some custom options. For detailed options see github.com/salesking/king_tour/blob/master/king_tour.js#L141
Tour html definition and div title options:
<div style="display: none;" id="defaultTour" class="kTour"> <!-- title element refering to the current page => url, with multiple tours add div's on this level with own url --> <div title="http://salesking.github.com/king_tour/"> <!-- tour step element options. Dont miss the ' around string options: el => jQuery element selector padding => padding around the selected element pos => position of the bubble around the el Add divs on this level for more steps. the options can be in any order --> <div title="el:'h1', padding:15, pos:'bcc'"> <p>This is Tourstep one</p> </div> </div> </div>
17.2K compressed(lf, comments)
This repo started with a clone of amberjack2 and was jQueryfied with lots of fixes and enhancements during it's implementation at SalesKing. amberjack was originally developed by Arash Yalpani. I would be glad to commit back to the origin if Arash puts up his sources on Github.