index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Tour, easy product tours with Bootstrap from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="deps/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
      h1 {
        font-size: 54px;
        margin-bottom: 9px;
        font-weight: bold;
        letter-spacing: -1px;
        line-height: 1;
      }
      h3 {
        font-weight: 500;
      }
    </style>
    <link href="deps/bootstrap-responsive.css" rel="stylesheet">
    <link href="deps/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <a href="https://github.com/sorich87/bootstrap-tour">
      <img id="gitban-tour" style="position: fixed; top: 0; right: 0; border: 0;"
      src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
      alt="Fork me on GitHub">
    </a>

    <div class="container">

      <header id="overview">
        <h1 id="reflex-mode">Bootstrap Tour</h1>
        <p class="lead">Quick and easy way to build your product tours with Twitter Bootstrap Popovers.</p>
        <p>Note: This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.</p>
        <a href="#" class="btn restart">Restart tour</a>
      </header>

      <div class="row">
        <div class="span9 content">
          <h2 id="usage">Usage</h2>
          <h3>1. Link to the JavaScript dependencies.</h3>
<pre class="prettyprint">
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="jquery.cookie.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap.tooltip.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap.popover.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap-tour.js"&gt;&lt;/script&gt;
</pre>
          <h3>2. Initialize the tour</h3>
          <pre class="prettyprint">var tour = new Tour();</pre>
          <h3>3. Add steps</h3>
<pre class="prettyprint">
tour.addStep({
  element: "", /* html element next to which the step popover should be shown */
  title: "", /* title of the popover */
  content: "" /* content of the popover */
});
</pre>
          <p>You can add as many steps as you want, but not too much or your
          users will fell asleep!</p>
          <h3>4. Start the tour</h3>
          <pre class="prettyprint">tour.start();</pre>

          <h2 id="options">Options</h2>
          <h3>Useful Methods</h3>
          <p>Bootstrap Tour saves the current step and will not
          display the tour again to users who have already completed it.</p>
          <p>If, for some reasons, you want to force the tour to be
          displayed, pass <code>true</code> to the <code>start()</code>
          method.</p>
          <pre class="prettyprint">tour.start(true);</pre>
          <p>Sometimes you want to end the tour prematurely:</p>
          <pre class="prettyprint">tour.end();</pre>
          <p>Or skip to the next step:</p>
          <pre class="prettyprint">tour.next();</pre>
          <p>Or go back to the previous step:</p>
          <pre class="prettyprint">tour.prev();</pre>
          <p>Or skip to a specific step:</p>
          <pre class="prettyprint">tour.showStep(i); // i is the position of the step in the tour, starting from 0 for the first step</pre>
          <p>Or restart the tour after it ended:</p>
          <pre class="prettyprint">tour.restart();</pre>
          <p>Or verify if the tour ended:</p>
          <pre class="prettyprint">tour.ended();</pre>

          <h3>Initialization Options</h3>
          <p>Default options:</p>
<pre class="prettyprint">
var tour = new Tour({
  name: "tour",
  keyboard: true,
  useLocalStorage: false,
  afterGetState: function (key, value) {},
  afterSetState: function (key, value) {},
  onStart: function (tour) {},
  onEnd: function (tour) {},
  onShow: function (tour) {},
  onHide: function (tour) {}
});
</pre>

          <h4><code>name</code></h4>
          <p>This option is used to build the name of the
          cookie or localStorage item where the tour state is stored. You can initialize several
          tours with different names in the same page and application.</p>

          <h4><code>keyboard</code></h4>
          <p>This option set the left/right arrow navigation. The default is true.</p>

          <h4><code>useLocalStorage</code></h4>
          <p>You can choose to save the tour state with localStorage instead of
          cookie. If you decide, you can safely remove the jquery.cookie plugin from the
          dependencies</p>

          <h4><code>afterGetState</code> and <code>afterSetState</code></h4>
          <p>You may want to do something right after
          Bootstrap Tour read or write the state. Just pass functions to
          <code>afterGetState</code> or <code>afterSetState</code>.</p>
          <p>Your functions can have two parameters:</p>
          <dl>
            <dt>key</dt>
            <dd>Contains the name of the state being saved. It can be
            <code>current_step</code> (for the state where the latest step
            the visitor viewed is saved) or <code>end</code> (for the state
            which is saved when the user complete the tour). Note that
            Bootstrap Tour prepends the key with <code>tour_</code> when
            saving the state.</dd>
            <dt>value</dt>
            <dd>The value of the state been saved. Can be the index of the
            current step if the key is <code>current_step</code>, or
            <code>yes</code> if the key is <code>end</code>.</dd>
          </dl>
          <p>A simple example if to send a post request to your server each
          time there is a change:</p>
<pre class="prettyprint">
var tour = new Tour({
  afterSetState: function (key, value) {
    jQuery.post("/some/path", value);
  }
});
</pre>
          <h4><code>onStart</code></h4>
          <p>Function to execute when the tour starts.</p>

          <h4><code>onEnd</code></h4>
          <p>Function to execute when the tour ends.</p>

          <h4><code>onShow</code></h4>
          <p>Function to execute right before each step is shown.</p>

          <h4><code>onHide</code></h4>
          <p>Function to execute right before each step is hidden.</p>

          <h3>Step Options</h3>
          <p>Default options:</p>
<pre class="prettyprint">
tour.addStep({
  path: "", // string
  element: "", // (required) jQuery selector
  placement: "right", // string|function
  container: "body" //string|false
  title: "", // string|function
  content: "", // string|function
  next: 0, // number
  prev: 0, // number
  animation: true, // boolean
  onShow: function (tour) {}, // function
  onHide: function (tour) {} // function
});
</pre>
          <dl>
            <dt>path</dt>
            <dd>Path to the page on which the step should be shown. this
            allows you to build tours that span several pages!</dd>
            <dt>element</dt>
            <dd>HTML element on which the step popover should be shown.</dd>
            <dt>placement</dt>
            <dd>How to position the popover - top | bottom | left |
            right.</dd>
            <dt>container</dt>
            <dd>Attachment of popover - optional: pass an element [string] to append the popover to,
            default=false appends the popover after the 'element' above. Helpful for IE.</dd>
            <dt>title</dt>
            <dd>Step title</dd>
            <dt>content</dt>
            <dd>Step content</dd>
            <dt>next</dt>
            <dd>Index of the step to show after this one, starting from 0 for the
            first step of the tour. -1 to not show the link to next step.
            By default, the next step (in the order you added
            them) will be shown.
            <br /><em>This option should be used in conjunction with "prev".</em></dd>
            <dt>prev</dt>
            <dd>Index of the step to show before this one, starting from 0 for the
            first step of the tour. -1 to not show the link to previous step.
            By default, the previous step (in the order you added
            them) will be shown.
            <br /><em>This option should be used in conjunction with "next".</em></dd>
            <dt>animation</dt>
            <dd>Apply a css fade transition to the tooltip.</dd>
            <dt>onShow</dt>
            <dd>Function to execute right before the step is shown. It overrides the global onShow option.</dd>
            <dt>onHide</dt>
            <dd>Function to execute right before the step is hidden. It overrides the global onHide option.</dd>
            <dt>options</dt>
            <dd>(Object) Extend the options for one step.</dd>
            <dt>reflex</dt>
            <dd>(Bool) Enable the reflex mode : you can click on the element for continue the tour.</dd>
          </dl>

          <h2 id="contributing">Contributing</h2>
          <p><a href="https://github.com/sorich87/bootstrap-tour/issues">Bug
            reports</a> and <a
            href="https://github.com/sorich87/bootstrap-tour/pulls">pull
            requests</a> are much needed!

          <h2 id="license">License</h2>
          <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
          Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
          Well, the same licenses as Bootstrap. We are lazy! ;)</p>
        </div>
      </div>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="deps/jquery.js"></script>
    <script src="deps/google-code-prettify/prettify.js"></script>
    <script src="deps/bootstrap-tooltip.js"></script>
    <script src="deps/bootstrap-popover.js"></script>
    <script src="deps/bootstrap-alert.js"></script>
    <script src="deps/jquery.cookie.js"></script>
    <script src="bootstrap-tour.js"></script>
    <script src="deps/example-tour.js"></script>
  </body>
</html>