jQuery UI Dialog with Bootstrap Tours

HTML

<script src="http://bootstraptour.com/assets/js/bootstrap-tour.js"></script>
<link rel="stylesheet" href="http://bootstraptour.com/assets/css/bootstrap-tour.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div id="id1">One</div>
<div id="id2">Two</div>
<div id="id3">Three</div>

JavaScript

var tour = new Tour();

var dir = 'next';
tour.addSteps([
        {
            element:" #id1",
            title: "1",
            content: "1st Content.",
            placement: "top",
            onShow: function () {
                console.log('This is Onshow Function');
            },
            onNext: function() {
                dir = 'next';
            }
        },
        {
            element:" #id2",
            title: "2",
            content: "2nd Content",
            placement: "top",
            onShow: function () {
                console.log('second step');         
            },
            onShown: function () {       
                client_text = $('#id2').text();
                if(client_text != ''){
                    console.log('----------client code present----------');
                    if(dir == 'next') {
                        tour.goTo(2);  
                    }
                }
                else{
                    console.log('-------client code not present--------');
                }
            },
        },
        {
            element:" #id3",
            title: "4",
            content: "3rd Content",
            placement: "top",           
            onShow: function () {
                console.log('third step');          
            },
            onPrev: function() {
                dir = '';
                tour.goTo(0);
            }       
        }
    ]);

tour.init();

tour.restart();