Bootstrap Tour Prev button not going to Previous page

Question

For clarification there are two pages:

1. index.html ( from this page with the help of next buttons on the pop-up I traverse to the second page mentioned below)

2. product_detail.html (from this page if i want to go back to index.html using prev button, the pop-up closes and nothing happens)

Content of custom.js:

var tour = new Tour({
    storage : false,
  steps: [
  {
    element: "#ture-one",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-two",
     title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-three",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-four",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    path:"/a/agile_new/product_detail.html",
    element: "#ture-five",
    title: "",
    placement: "left",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {

    element: "#ture-six",
    title: "",
    placement: "left",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
  },
  {

    element: "#ture-seven",
    title: "",
    placement: "right",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {

    element: "#ture-eight",
    title: "",
    placement: "right",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"       
  }
]});


tour.init();

tour.start();

Answer 1

Please have a look over updated script file... it works fine at mine side

$(function () {

    var tour = new Tour({

        steps: [
        {
            element: "#ture-one",
            title: "s",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration:5000
        },
        {
            element: "#ture-two",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 6000
        },
        {
            element: "#ture-three",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 7000
        },
        {
            path:"/index.html",
            element: "#ture-four",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 7000
        },
      {
          path:"/product.html",
          element: "#ture-five",
          title: "",
          placement: "left",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
          duration: 7000
      },
      {

          element: "#ture-six",
          title: "",
          placement: "left",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
          duration: 7000
      },
      {

          element: "#ture-seven",
          title: "",
          placement: "right",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
      },
      {

          element: "#ture-eight",
          title: "",
          placement: "right",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"       
      }
        ]});


    tour.init();

    tour.start();
});

Answer 2

According to the http://bootstraptour.com/api/ it looks like there is an option you can add the path on each of your steps. You've only defined path on the last step. Try adding the additional property on each of the steps.

path: "/"

I took this code directly from how they do the demo tour. Notice they specify a path for each step.

steps: [
  {
    path: "/",
    element: "#demo",
    placement: "bottom",
    title: "Welcome to Bootstrap Tour!",
    content: "Introduce new users to your product by walking them through it step by step."
  }, {
    path: "/",
    element: "#usage",
    placement: "top",
    title: "A super simple setup",
    content: "Easy is better, right? The tour is up and running with just a few options and steps."
  }, {
    path: "/",
    element: "#license",
    placement: "top",
    title: "Best of all, it's free!",
    content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
  }, {
    path: "/api",
    element: "#options",
    placement: "top",
    title: "Flexibilty and expressiveness",
    content: "There are more options for those who want to get on the dark side.<br>\nPower to the people!",
    reflex: true
  }, {
    path: "/api",
    element: "#duration",
    placement: "top",
    title: "Automagically expiring step",
    content: "A new addition: make your tour (or step) completely automatic. You set the duration, Bootstrap\nTour does the rest. For instance, this step will disappear in <em>5</em> seconds.",
    duration: 5000
  }, {
    path: "/api",
    element: "#methods",
    placement: "top",
    title: "A new shiny Backdrop option",
    content: "If you need to highlight the current step's element, activate the backdrop and you won't lose\nthe focus anymore!",
    backdrop: true
  }, {
    path: "/api",
    element: "#reflex",
    placement: "bottom",
    title: "Reflex mode",
    content: "Reflex mode is enabled, click on the text in the cell to continue!",
    reflex: true
  }, {
    path: "/api",
    title: "And support for orphan steps",
    content: "If you activate the orphan property, the step(s) are shown centered in the page, and you can\nforget to specify element and placement!",
    orphan: true,
    onHidden: function() {
      return window.location.assign("/");
    }
  }
]

There are also a ton of different options you can provide for steps. Notice the last step above. onHidden: , it can be made to take you wherever you like. In this case, back home. "/"

path: "",
  element: "",
  placement: "right",
  title: "",
  content: "",
  next: 0,
  prev: 0,
  animation: true,
  container: "body",
  backdrop: false,
  redirect: true,
  reflex: false,
  orphan: false,
  template: "",
  onShow: function (tour) {},
  onShown: function (tour) {},
  onHide: function (tour) {},
  onHidden: function (tour) {},
  onNext: function (tour) {},
  onPrev: function (tour) {},
  onPause: function (tour) {},
  onResume: function (tour) {}

I hope this helps you.

Answer 3

There is a "strange" way of doing it. I am not a user of bootstrap tour, but you can push to history ?

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html")

or use localStorage to store last page by user