Bootstrap Tour doesn't show on Bootstrap Twitter 3 modal

Question

Ok, so I am integrating Bootstrap Tour with a project that uses Twitter Bootstrap 3. Basically, everything works fine until I show a modal and then try to attach a step to it. It doesn't show until I resize the browser. I can close the modal and it is not there and resize the window and then it shows, so it isn't a z-index issue I don't believe. Any help would be appreciated.

// Instance the tour
var jag_tour = new Tour();

//Step 1, show info about are submission entry
jag_tour.addStep({
    element: ".submission_entry",
    title: "Sample Signup",
    content: "This is where your snazzy new signups will be found. Click them to show more details.",
    onNext: function(tour) {
        var submission_id_info = $(".submission_entry").attr('id');
        submission_id = submission_id_info.split('_');
        show_submission_info_modal(submission_id['1']);
        jat_tour.start();
    }
});

//Step 2, show our modal popup edit info
jag_tour.addStep({
    element: "#modal_submission_owner_name",
    title: "Prospect Info",
    content: "Need to change the owner of a prospect? How about some details? No problem, just do that here.",
    onPrev: function(tour) {
        $("#view_submission_modal").modal('hide');
    },
});

// Initialize the tour
jag_tour.init();

jag_tour.start();

Answer 1

I've had success with calling the modal manually in the onNext block. In your case, this would look like

onNext: function(tour) {
    var submission_id_info = $(".submission_entry").attr('id');
    submission_id = submission_id_info.split('_');
    show_submission_info_modal(submission_id['1']);
    $('#modal_submission_owner_name').modal
    jat_tour.start();
}

I'm also curious why you call jat_tour.start() in this step. It seems like you should only need to start the tour on initialization, no?

Answer 2

I had the same problem with my Angular app. Initially I was calling tour's init and start from a button I was using to launch the tour:

<button ng-click="tour.init(true);tour.start(true);">Start Tour</button>

I would never see the popup until resizing the screen. I tried everything I could with z-index but it didn't matter, the tour wasn't even started until this sizing change was done so there was no popovder object to raise the z-index of, I didn't even see the element in my browser's DOM explorer until after the resize. When I refactored to call a function in the controller to do the same, the problem went away!

<button ng-click="startTour()">Start Tour</button>

(controller)

$scope.startTour = function(){
        tour.init(true);
        tour.start(true);
}

Possibly a scope issue (though I never saw any errors), but I'm still scratching my head why this helped.