An introduction to 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">
    $('.smallipopTour').smallipop();
</script>

How to start

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

<div class="column size1of3 smallipop"
    data-smallipop='
        {
            "tourIndex": 1,
            "tourTitle": "example1",
            "preferredPosition": "right",
            "tourHighlight": true
        }'>
    ...
</div>