These examples will teach you how to use the Smallipop tour feature

A simple tour example

Click to start the tour

This is some sample text
<span class="smallipopTour" data-smallipop-tour-index="1">Step 1</span>
<span class="smallipopTour" data-smallipop-tour-index="2">Step 2</span>
<span class="smallipopTour" data-smallipop-tour-index="3" data-smallipop-preferred-position="right">Step 3</span>
<span class="smallipopTour" data-smallipop-tour-index="10">Step 4</span>

<script type="text/javascript">

How to start

We start with a basic layout and some sample content for which we want to create a tour.

Click here to start

  • Foo
  • Bar
  • Test

You can use the html data attribute to setup each tour step

<div class="column size1of3 smallipop"
            "tourIndex": 1,
            "tourTitle": "example1",
            "preferredPosition": "right",
            "tourHighlight": true

Some text

That's it?

No! More is coming soon!

© 2012-2013 by Small Improvements