jQuery: joyRideTip & postStepCallback

http://www.zurb.com/playground/jquery_joyride_feature_tour_plugin

HTML

<script src="http://foundation.zurb.com/files/zurb-joyride-2/jquery.cookie.js"></script>
<script src="http://foundation.zurb.com/files/zurb-joyride-2/modernizr.mq.js"></script>
<script src="http://foundation.zurb.com/files/zurb-joyride-2/jquery.joyride-2.0.js"></script>
<div class="container">
    <div class="row">
        <div class="twelve columns">
             <h1>ZURB's Joyride Feature Tour Plugin</h1>
             <a href="#" id="start">View Docs + Playground for Joyride</a> 
            <hr>
        </div>
    </div>
    <br><br>
    <div class="row">
        <div class="six columns">
            <h2 id="numero1" class="so-awesome">Point Out Those New Features!</h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare
                sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed
                consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis
                consectetur purus sit amet fermentum.</p>
        </div>
        <div class="six columns">
            <img id="numero5" src="http://foundation.zurb.com/files/zurb-joyride-2/demo/430x200.gif">
        </div>
    </div>
    <br><br><br><br>
    <div class="row">
        <div class="twelve columns">
            <h3 id="numero3">Get the Most Out of Your App!</h3>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean
                eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
    </div>
 ...

CSS

#joyRideTipContent {
    display: none;
}
/* Default styles for the container */
 .joyride-tip-guide {
    position: absolute;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    color: #fff;
    width: 300px;
    z-index: 101;
    top: 0;
    /* keeps the page from scrolling when calculating position */
    left: 0;
    font-family:"HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
    font-weight: normal;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.joyride-content-wrapper {
    padding: 10px 10px 15px 15px;
}
/* Mobile */
 @media only screen and (max-width: 767px) {
    .joyride-tip-guide {
        width: 95% !important;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        left: 2.5% !important;
    }
    .joyride-tip-guide-wrapper {
        width: 100%;
    }
}
/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
 .joyride-tip-guide span.joyride-nub {
    display: block;
    position: absolute;
    left: 22px;
    width: 0;
    height: 0;
    border: solid 14px;
    border: solid 14px;
}
.joyride-tip-guide span.joyride-nub.top {
    /*
  IE7/IE8 Don't support rgba so we set the fallback
  border color here. However, IE7/IE8 are also buggy
  in that the fallback color doesn't work for
  border-bottom-color so here we set the border-color
  and override the top,left,right colors below.
  */
    border-color: #000;
    border-color: rgba(0, 0, 0, 0.8);
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    top: -28px;
    bottom: none;
}
.joyride-tip-guide span.joyride-nub.bottom {
    /*
  IE7/IE8 Don't support rgba so we set the fallback
  border color here. However, IE7/IE8 are also buggy
  in that the fallback color doesn't work for
  border-top-color so here we set the border-color
 ...

JavaScript

$('#joyRideTipContent').joyride({
    'postStepCallback': testPostStepCallback
});

function testPostStepCallback(index, elem) {
    console.log('testPostStepCallback:');
    console.log(index);
    console.log(elem);
}