JSFiddle - React, Tailwind, and code Playground

by iluzyanin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.9.0/css/bootstrap-tour.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.9.0/js/bootstrap-tour.min.js"></script>
<button data-bind="click: startTour">Start tour</button>

JavaScript

function ViewModel(){
    var self = this;
    this.tour = new Tour({ 
        steps: [
            {
                orphan: true,
                title: "Help Title",
                content: '<button id="newButton" data-bind="click: showMessage">showMessage</button>',
                onShown: function(tour) {
                    // apply the bindings after content is added
                    ko.applyBindings(self, document.getElementById("newButton"));
                }
            }
        ]
    });
    this.startTour = function() {
        this.tour.init();        
        self.tour.start(true);        
    }
    this.showMessage = function() {
        alert('Hello!');
    }
}
ko.applyBindings(new ViewModel());