Basics to Add Product Tours to Pages using Hopscotch
Hopscotch is developed by Linkedin. Linkedin actually has lot of scripts, possibly less known to the main stream. You can create callbacks for tour events including onStart, onEnd, onShow, onNext, onPrev, onClose properties, Multi-page persistence using HTML5 sessionStorage using cookies as a fallback and more. The repository is available here :
Play with a Demo here :
The source code of demo is also included, so actually you can simply download, uncompress and open the page in browser (on localhost) to check.
Add Product Tours to Pages using Hopscotch : Going Great
Basics are written so much details, that it is quite bigger to read but possibly a newbie will not feel the absence of a GUI – ultimately we need to hand code it. What they have not said (we are not sure why), the thing can be made far better with modifying the CSS. They have used PNG in the CSS file, you can consider to change it to Base64 Encoded Data URI. Read the guide on Image in CSS to Base64 Data URI Encoding to reduce the number of calls for the files to make it more faster loading.