Extension:GuidedTour/Shared tour instructions

A series of steps
First you have to consider when and how your tour should start

The tour itself is a sequence of dialog windows that appear on the page, called steps. (It is possible to have a single-step tour that operates as a fancy tooltip, and to jump into the tour at different points.)

Each step has an implicit next step. You define the tour in a JavaScript function, passing it the steps as a JavaScript array of objects; so at the code level the next step is explicitly the next item in the steps array.

The extension keeps track of the current step in each tour in a browser cookie, so that a tour can continue across multiple web pages.

Design
Note that if a step doesn't have a 'next' button, you must implement a  function for the current step that returns true, otherwise the tour will "stall" on it — every time the user reloads the page or visits any page that loads your tour, the current step will reappear until the user exits the tour.
 * 1) Consult the design recommendations.
 * 2) Choose a tour name.
 * 3) For each step in your tour:
 * 4) Choose title and description text.
 * 5) Then, choose whether the step will have an attachment or a central overlay:
 * 6) * Attachment positions a step near a page element such as the Edit tab, a link, or the save button. You identify the page element using a selector.  Any jQuery selector can be used.  In general, this includes all CSS selectors.  This example positions near the Edit tab using an id selector:
 * For attachments, you must choose an attachment position. The choices are topLeft, top, topRight, rightTop, right, rightBottom, bottomRight, bottom, bottomLeft, leftBottom, left, leftTop.  You can experiment with these values, and may want to test in a skin beside your primary one (using the useskin parameter).
 * 1) * Overlay simply shows the step in the center of the screen. It allows you to explain something without attaching to an element.
 * 2) Choose the button actions.  If you want the user to click something (such as the edit tab), you can provide no explicit buttons (an Okay button that dismisses the step will still show).  Otherwise, you will want to specify one or more.  You can specify arbitrary button actions.  However, there are helpers included for common behaviors of the Okay button:
 * 3) *  - Will go the next step, unless the user checked the "End tour" checkbox.
 * 4) *  - Will end the tour
 * 5) By default, the step will close when they click outside it.  In some cases, such as on the edit page, you may want to disable this by including:
 * 6) Decide if you want automatic skip behavior.  In some cases, you will want to automatically skip a step based on the current state.  For example, if you have a step asking the user to click Edit, you will want to skip if they're already on the edit page:
 * 1) *  - Will end the tour
 * 2) By default, the step will close when they click outside it.  In some cases, such as on the edit page, you may want to disable this by including:
 * 3) Decide if you want automatic skip behavior.  In some cases, you will want to automatically skip a step based on the current state.  For example, if you have a step asking the user to click Edit, you will want to skip if they're already on the edit page:
 * 1) Decide if you want automatic skip behavior.  In some cases, you will want to automatically skip a step based on the current state.  For example, if you have a step asking the user to click Edit, you will want to skip if they're already on the edit page:
 * 1) Decide if you want automatic skip behavior.  In some cases, you will want to automatically skip a step based on the current state.  For example, if you have a step asking the user to click Edit, you will want to skip if they're already on the edit page:

Tips

 * Use debug mode while developing your tours.
 * Inspect the tour cookie (named wgCookiePrefix-mw-tour) to see what step your tour is on.
 * Even when writing an on-wiki tour, use a JavaScript checker such as jshint to check for errors in your tour definition.
 * When stepping through your code in a browser debugger, the  function in guiders.js is one of the most useful functions in which to set a breakpoint.