A webtour consists of multiple steps that are used to highlight different
elements on the page. Each webtour step is displayed as a dialog box with
navigation buttons and an optional arrow.
Using webtour events, you can control the underlying page to interact
with page elements or even provide additional highlighting.
The webtour relies heavily on jQuery UI Dialogs for displaying the webtour
content. Webtour provides complete control over the underlying dialogs.
You can set global dialog options and provide options for each step in your
Using webtour is as easy as making a call to
which creates a webtour step for every child element of the container. Typically
this will involve the use of a div container with a number of child elements
which represent the various webtour pages. This will create a series of
dialogs that are centered on the screen.
The webtour uses a set of buttons for navigating through and ending the
webtour. If you close the webtour without pressing the "End Tour"
button, then the webtour will resume where it left off the next time the
tour is shown. This feature only works if the user does not leave
or refresh the current page. If you want the webtour to remember the
tour position across page refreshes, then you'll need to use the provided
events to persist and restore the current webtour page. By default,
the current position in the tour is persisted and restored using the jQuery
data API which is reset if the page is refreshed.
Often though, you will want more control over how your webtour is displayed.
You may even want to allow users to exit the tour and pick-up where the
left off when they return to the page. The extensive list of options and
events provide you the ability to customize the webtour to suit your needs.