JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.10.1/css/bootstrap-tour-standalone.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.10.1/js/bootstrap-tour-standalone.js"></script>
<body>
    <button id="start" class="btn btn-default">Start the tour</button>
    <div id="box1" class="box">Element 1</div>
    <div id="box2" class="box">Element 2</div>
    <div id="box3" class="box">Element 3</div>
    <div id="box4" class="box">Element 4</div>
    <div id="box5" class="box">Element 5</div>
</body>

CSS

.box {
    background-color: #eee;
    border: black solid 1px;
    width: 100px;
    height: 50px;
    margin: 4px;
}

JavaScript

var foo = true;

var tour = new Tour({
    storage: false,
    debug: true,
    steps: [{
        orphan: true,
        animation: true,
        backdrop: true,
        title: "index 0 / Step 1",
        content: "schtuff"
    }, {
        animation: true,
        element: "#box1",
        placement: 'right',
        title: "index 1 / Step 2",
        content: "click this box to continue, should skip to Index 5 / Step 6",
        template: "<div class='popover tour'>" +
            "<div class='arrow'></div>" +
            "<h3 class='popover-title'></h3>" +
            "<div class='popover-content'></div>" +
            "<div class='popover-navigation'>" +
            "<button class='btn btn-default' data-role='prev'>« Prev</button>" +
            "<span data-role='separator'>|</span>" +
            "<button id='skipBtn' class='btn btn-default'>Next »</button>" +
            "<button class='btn btn-default' data-role='end'>End tour</button>" +
            "</div>" +
            "</div>",
    }, {
        orphan: true,
        animation: true,
        backdrop: true,
        title: "index 2 / Step 3",
        content: "moar schtuff",
    }, {
        element: "#box2",
        placement: 'right',
        title: "Index 3 / Step 4",
        content: "schtuff"
    }, {
        element: "#box3",
        placement: 'right',
        title: "Index 4 / Step 5",
        content: "schtuff"
    }, {
        element: "#box4",
        placement: 'right',
        title: "Index 5 / Step 6",
        content: "schtuff"
    }]
});

$("#start").on("click", function () {
    tour.start(true);
});

$(document).on('click', '#skipBtn', function(e) {
    e.preventDefault();
    if (foo) {
    	tour.goTo(5);
    }
    else {
        tour.next();
    }
});

//initialize the tour
tour.init();