Alvaro's Simple Tour Plugin for jQuery

This is a jQuery plugin that will help you to make website tours. If you want to know how it works press the button "start tour" .

Start Tour

How it works?

The plugin works using a very easy jSON Structure that gives it to the plugin all the elements, configurations, tooltips and help texts.

.i.e.
<script>
var tour = {
  data : [
    { element: '#id', 'tooltip' : 'This is a tooltip for some element #id' },
    { element: 'ul li:last a', 'tooltip' : 'The last link of some ul list' },
    { element: '.class', 'tooltip' : 'A tooltip for some class' }
  ],
  controlsPosition : 'RT'
}

$.aSimpleTour(tour);
</script>
The "tour" section

The "tour" attribute contains elements and configurations and you can set all the elements what you want with specials configurations for all the steps. Every element that you add into the tour attribute is a new step tour and you can configure every step using this attributes:

element
The element attribute is a DOM Element representation. By example you can use an ID (#id), a class (.class) or a jquery selector like "input[type=submit]"
tooltip
This is the tooltip text
position
* The tooltip position it can be setted using "position". The options are : T, B, L, R, TL, TR, BL, BR, LT, RT, LB, RB.
text
The main text that it shows into over the controls tour. You can use HTML too!
* T means top, B means bottom, L means left and R means right.
Other options

There are others options that can be used to change css styles like backgrounds, colors, fonts, and it's very effective because the plugin don't need a css file.

welcomeMessage
The starting message tour
buttons
With this attribute you can change the control buttons text and class:
{ 
    next  : { text : 'Next →', class : ''},
    prev  : { text : '← Previous', class: '' },
    start : { text : 'Start', class: '' },
    end   : { text : 'End', class: '' }
}
tooltipColors & controlsColors
This attribute can be used to change colors and backgrounds like :
{ 
    'color' : 'white', 
    'backgroud' : 'rgba(0, 0, 0, 0.85)'
}
controlsPosition
It is the starting position of the tour controls, it can be: TL, TR, BL, BR

Dependencies

This plugin depends on jQuery ScrollTo Plugin because I don't want to rebuild the wheel.