CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
MLister
MLister

Reputation: 10320

Disable/hide "End tour" button in Bootstrap Tour

Using the bootstrap-tour plug-in (http://bootstraptour.com/), I want to disable or hide the default 'End Tour' button on each step except for the very last step.

I tried modifying the step template to get rid of End Tour button completely, but how do I activate it on the very last step?

Upvotes: 3

Views: 3880

Answers (2)

Flipper
Flipper

Reputation: 2609

An alternative to Axel's answer would be to use the data part as the CSS selector:

  1. Set the End button to be hidden by default: .popover-navigation [data-role="end"] { display: none; }
  2. Target the last step using: #step-4 .popover-navigation [data-role="end"] { display: block; }

This shortens the amount of steps and if you have a custom popover defined somewhere else, this prevents you from having to recopy that template.

Upvotes: 3

Axel
Axel

Reputation: 10772

  1. Add the class .btn-end to your end button using the template parameter:

    var tour = new Tour({
    template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><nav class='popover-navigation'><div class='btn-group'><button class='btn btn-default' data-role='prev'>« Prev</button><button class='btn btn-default' data-role='next'>Next »</button></div><button class='btn btn-default btn-end' data-role='end'>End tour</button></nav></div>"
});

  2. Set .btn-end to be hidden by default, using CSS: .btn-end { display: none; }

  3. Target the last step, using the #step-x ID in CSS. The last step ID will be the number of steps, minus 1 (as the count starts at 0). If you have 5 steps, the Id will be #step-4 (5 - 1 = 4).
    #step-4 .btn-end { display: block; }

See a working example here: http://jsfiddle.net/Zfu5f/2/

Upvotes: 3

Related Questions