Start the tour

Take the tour, go ahead.....press the button.....do it!!

Hi there...

and welcome to the plugin called 'Power Tour'. Power Tour is a powerfull jQuery tour plugin, which can be used as a tour, helpers, guides or tooltips. The plugin is pretty powerfull and has a lot of options which gives you the power to build a very cool tour.

Use the power tour plugin for your website, products, applications, landing pages or something else.

A couple of options
  • 4 Tour types
  • Keyboard navigation
  • 5 Callback functions
  • Show timer and time controls
  • Set your own style
  • Highlight the tour
  • Choose between 21 positions
  • Screen and hook positions
  • Set tour time
  • And much more...

Example single step options

hookTo: '#step-one',
content: '#box-one',
cloneTo: '#theclone',
width: 400,
arrowPosition: 'rb',
showArrow: true,
offsetY: 50,
offsetX: 5,
prevLabel: 'Prev',
nextLabel: 'Next',
stopLabel: 'Stop',
center: 'hook',						  
customClassStep: 'blue-step',
customClassHook: 'pre-green',
highlight: true,
highlightElements: '.highlighteme',
time: '00:05',
onShowStep: function(){}

Tour types

Not every tour is the same, therefor we added the "tourType" options, which allows you to choose from 4 different types, 3 tour types and 1 tooltip type. You can see on the documentation page which tour options can be used in which tour type.

Auto /
Step /
ShowAll /
Tooltip

Clean and commented code

The plugins are coded in a clean way with lots of comments, this way you can find and change the plugin with ease. This is a jQuery plugin, so we used jQuery and kept the hardcore javascript to a minium.

  • Full and minified versions
  • Full and lite version
  • Clean code
  • Good commented code
  • No hardcore javascript plugin
  • HTML5 & CSS3
The hook

Step postions

The power tour allows you to use up to 21 step positions. You can choose from 12 hook related positions and 9 screen positions, which can be changed with the offset values giving you more room to setup a creative tour. The tour is animated, so you can choose between centering the hook or the step.

  • 12 Hook related positions
  • 9 Screen positions
  • Use offset values(negative and positive)
  • Centering the hook or step

Cloned step

Some times you have multiple items that you want to highlight, but you dont want to show/use the same step each time. This can be solved very simple, as the power tour has the options 'cloneTo', which copy's the step to a other (dummy) hook. The main step/hook will be used to center the step or hook.

Custom styles

Not every one likes the white default style of the step, or simply cant use the white color, to solve this we added the option 'customClassStep' to the tour plugin, so you can style each single style with your own custom style. Styles are classes, which you have to define in your stylesheet, or use our classes that we made for this demo.

Keyboard navigation

If this option is set to true, you can use a couple of keyboard keys to navigate true your tour.

tourType: step
  • prev = arrow key
  • next = arrow key right
  • cancel = ESC
tourType: auto
  • prev = arrow key
  • next = arrow key right
  • cancel = ESC
  • play/pause = space

Centering

The power tour plugin gives you the possibility to choose between centering the step or the hook, this gives you more room to be creative.

Biscuit dessert dessert cake chocolate bar candy canes. Cake faworki cookie pudding sweet powder donut wypas. Marshmallow donut caramels lemon drops fruitcake marzipan cotton candy pastry jelly. Cookie toffee sugar plum pie macaroon jelly marshmallow lollipop icing. Halvah bear claw marzipan sesame snaps cheesecake. Cake danish cotton candy sweet roll.

Custom class hook

You can customize your step, but you also can give the hook an custom class, which can be used for many creative things. This option is called 'customClassHook'.

Highlight other elements

The power tour plugin has the highlight option, which highlightes the step and hook, if set to true. But it also has the option to highlight other elments, this feature is almost the same as the option 'cloneTo' but this time there's just one visible step.

Biscuit dessert dessert cake chocolate bar candy canes. Cake faworki cookie pudding sweet powder donut wypas. Marshmallow donut caramels lemon drops fruitcake marzipan cotton candy pastry jelly. Cookie toffee sugar plum pie macaroon jelly marshmallow lollipop icing. Halvah bear claw marzipan sesame snaps cheesecake. Cake danish cotton candy sweet roll gingerbread croissant.
Biscuit dessert dessert cake chocolate bar candy canes. Cake faworki cookie pudding sweet powder donut wypas. Marshmallow donut caramels lemon drops fruitcake marzipan cotton candy pastry jelly. Cookie toffee sugar plum pie macaroon jelly marshmallow lollipop icing. Halvah bear claw marzipan sesame snaps cheesecake. Cake danish cotton candy sweet roll gingerbread croissant.
Biscuit dessert dessert cake chocolate bar candy canes. Cake faworki cookie pudding sweet powder donut wypas. Marshmallow donut caramels lemon drops fruitcake marzipan cotton candy pastry jelly. Cookie toffee sugar plum pie macaroon jelly marshmallow lollipop icing. Halvah bear claw marzipan sesame snaps cheesecake. Cake danish cotton candy sweet roll gingerbread croissant.
Biscuit dessert dessert cake chocolate bar candy canes. Cake faworki cookie pudding sweet powder donut wypas. Marshmallow donut caramels lemon drops fruitcake marzipan cotton candy pastry jelly. Cookie toffee sugar plum pie macaroon jelly marshmallow lollipop icing. Halvah bear claw marzipan sesame snaps cheesecake. Cake danish cotton candy sweet roll gingerbread croissant.

Lets get this tour started

As you can see this example is automated, you can see the end time at the bottom. The power tour plugin has a lot of cool options, so we will demonstrate most of them.

We call this part the 'step', and the part that should be highlighted(optional) a hook.

This step has an screen position, so its not hooked to any hook. You can find more about this on the docs page.

We have 4 tour type's, this type is the 'auto' type, which is automated, you can see the timer at the bottom of the site.

This is the button that triggers the tour.

Please share this creative plugin, thanks!

Easy to use

This is the code thats used for each single step, as you can see there are a lot of cool options which you can use. This example used the 'customClassHook' option to change the style of the hook.

He, I've got HTML inside me

Yes you can use HTML, PHP or any kind of markup inside a step. This give's you more control and build cool steps.

Step positions

Where about to enter the steps position demo, but notice that it will go quick and that we will show only the hook releated positions and not all of the screen positions.

More about the positions can be found on the docs page.

Top left position 'tl'

Top mid position 'tm'

Top right position 'tr'

Right top position 'rt'

Right mid position 'rm'

Bottom right position 'rb'

Bottom right position 'br'

Bottom mid position 'bm'

Bottom left position 'bl'

Left bottomt position 'lb'

Left mid position 'lm'

Left top position 'lt'

Yes you are seeing double...

Yes you can change the style of a step.

Be creative and use a cool style.

Set a style like this strange lookin orange...ish color.

Bla bla bla some other style....

Where almost done with the styles...

For the last style we use black.

In this step the hook is centered.

But in this step the step is centered.

By adding a custom class to the hook, you can do some pretty cool stuff with the hook.

See the image next to me is highlighted as well.

All good things come to an end

Yes this is the end of this tour, we have showen you most of the features, so now you know you can build a sweet tour thats creative and eye catching.

Improve your usability with the powerfull power tour plugin!