Creating a site tour with jQuery

Sometimes when you build a custom solution end users need a little bit of help, or time, in order to determine where everything is. Grounding them within the actual environment rather than within help pages is the fastest way in my opinion to get them up to speed. A great option is jQuery site tour.

Working either manually or in a timed fashion it highlights predetermined classes with text and images. Tooltips on steroids in a way… To use it, you simply have to add certain class to any elements that you want to describe in the walk-through. E.g. “tour_1″, “tour_2″ would look like:

1 <div class="box left">
2     <h2 class="tour_1">Create a tour>
3     <p>Far far away, behind the word mountains, ...p>
4 >

The following parameters can be set:

  • name: the class given to the element where you want the tooltip to appear
  • bgcolor: the background color of the tooltip
  • color: the color of the tooltip text
  • text: the text inside of the tooltip
  • time: if automatic tour, then this is the time in ms for this step
  • position: the position of the tip

Resources
There is a full article with a functional demo here: http://tympanus.net/codrops/2010/12/21/website-tour/