aSimpleTour - jQuery Plugin

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.

Alvaro's Simple Tour Plugin for jQuery