jQuery UI tour

What can I do with it?

Build interactive tours through your page to showcase the important parts.
To present what it can do, just press play!

not playing


Manipulate DOM elements to present them in the right light.

Possible manipulations

You can center an element with the ScrollToManipulation. To expose a whole area, use the ExposeManipulation or the HighlightManipulation. If you want to give structure to the tour, use the MarkManipulation. Maybe you want to explain a little more with the HintManipulation.

Combine multiple manipulations

You can use multiple manipulations on the same step.

Need a realistic scenario?

Suppose you have a non-trivial for you want to explain a little further. You can do it like this:

Have fun!

To see how this tour is built, use the source of this page. If you find an issue or wish a feature, report it on github. Or you contribute by creating a pull-request.