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?