Remove "End Tour" button until last step?

[aensley]

I have a very specific scenario where I need to force users to go through every step of the tour before they can dismiss it. What is the best way to hide the "End Tour" button until the last step? Do I have to set the template for every step?

[sorich87]

You can set a template globally.

[s7anley]

As @sorich87 wrote, you can set one global template and really easily determine last step: this.next === -1.

[aensley]

Thank you! Just what I needed.

[sjorsvanheuveln]

@aensley Could you give an example of how you have implemented this. I'm facing the same problem and I'm not sure how to implement this efficiently. Ty

[aensley]

Here's the basic example altered to hide the "End Tour" button until the last step:

// Instance the tour
var tour = new Tour({
    steps: [
        {
            element: "#my-element",
            title: "Title of my step",
            content: "Content of my step"
        },
        {
            element: "#my-other-element",
            title: "Title of my step",
            content: "Content of my step"
        }
    ],
    template: function () {
        return (
            this.next === -1 // Is this the last step?
                ? "<div class='popover tour'>" + // Yes.
                    "<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 class='btn btn-default' data-role='end'>End tour</button>" +
                    "</div>" +
                "</div>"
                : "<div class='popover tour'>" + // No.
                    "<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 class='btn btn-default' data-role='next'>Next »</button>" +
                    "</div>" +
                "</div>"
        );
    },
});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

[thomasdolberg]

@aensley is there any way to only have the "Next" / "End Tour" buttons change instead of repeating the entire template?

[aensley]

Replying to https://github.com/sorich87/bootstrap-tour/issues/244#issuecomment-348759039 by @thomasdolberg:

Actually... yes.

// Instance the tour
var tour = new Tour({
    steps: [
        {
            element: "#my-element",
            title: "Title of my step",
            content: "Content of my step"
        },
        {
            element: "#my-other-element",
            title: "Title of my step",
            content: "Content of my step"
        }
    ],
    template: function () {
        return "<div class='popover tour'>" + // Yes.
                    "<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>" +
                        (this.next === -1 ? 
                            ? "<button class='btn btn-default' data-role='end'>End tour</button>"
                            : "<button class='btn btn-default' data-role='next'>Next »</button>") +
                    "</div>" +
                "</div>";
    },
});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

[sylviestephanies]

this not work for me, this.next cannot be read

[sylviestephanies]

I figure out, change this.next to tour.getCurrentStep()