All geek questions in one place

Bootstrap Tour doesn't work at all

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Trello Inspired</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/plugins/bootstrap-tour.min.css">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  </head>
  <body>
    <div class="left-container">
      <span class="logo"><h2>Title 2</h2></span>
      <p class="left-msg welcom-msg">Now that registration and filling out forms is out the way, let get you all set up.</p>
      <p class="left-msg need-enrol">First you'll need to enrol to an exam.</p>
    </div>
    <div class="right-container">
      <button class="btn btn-default enrol-btn" id="enrol-btn1" data-toggle="popover" data-placement="left">Enrol</button>
      <button class="btn btn-default start-exam-btn" style="display:none;">Preparation</button>
    </div>
  </body>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../js/libs/bootstrap.min.js"></script>
  <script src="../js/plugins/bootstrap-tour.min.js"></script>
  <script type="text/javascript">

    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#enrol-btn1",
        title: "Exam Enrolment",
        content: "First let enrol to an exam"
      },
      {
        element: "#see-schedule",
        title: "Your Schedule",
        content: "Great, let see your new schedule."
      }
    ]});

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
  </script>
</html>

I have added all the necessary dependencies. I use Bootstrap 3, so there is no need to include popover.js separately. I looked at the plugin homepage for instructions, but that didn't help either.

+4
source share
4 answers

Bootstraptour saves the progress of the tour in your local storage. It also means that when you try to configure it, etc. used the wrong element id, bootstraptour can still store that it should display the second step next time .. even if it does not exist, and at that moment it does nothing.

, (, ), :

var tour = new Tour({
    name: '<some random name>'
});

, . , currentstep "1" "0", .

+15
  • , : element: "#see-schedule". "" .
  • tour.start(true) - API :

. true, .

, , - . :

<a href="#" class="btn btn-block btn-primary" id="startTour">Start tour</a>

$("#startTour").click(function(){
    tour.restart();
})

JsFiddle. , , " ".

+9

I found that when developing with Bootstrap Tour it makes life easier if you clear "localStorage" before it is initialized so that you don't get any long session data. In the case of the original question, this will be:

// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: "#enrol-btn1",
    title: "Exam Enrolment",
    content: "First let enrol to an exam"
  },
  {
    element: "#see-schedule",
    title: "Your Schedule",
    content: "Great, let see your new schedule."
  }
]});

// Clear session data
localStorage.clear();

// Initialize the tour
tour.init();

// Start the tour
tour.start();
+3
source

I found intro.js much better (and smaller package) http://usablica.imtqy.com/intro.js/

+2
source

Source: https://habr.com/ru/post/1542639/

More articles:


All Articles