Bootstrap Tour doesn't start

Question

Can anyone explain why Bootstrap Tour doesn't start showing hints in the following code? I am very interested to use this plugin for my webpages, but I can't make it work:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap tour test</title>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <link href="bootstrap-tour.min.css" rel="stylesheet">
  <script src="bootstrap-tour.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="tour1">First div...</div>
        <div id="tour2">Second div...</div>
    </div>

    <script>
    var tour = new Tour({
      steps: [
      {
        element: "#tour1",
        title: "Step 1",
        content: "This is the first div"
      },
      {
        element: "#tour2",
        title: "Step 2",
        content: "This is the second div"
      }
    ]});
    
    tour.init();
    tour.start();
    </script>
</body>
</html>

I have read and followed examples from different sources on the web, but the hints doesn't show...

Rayees AC · Accepted Answer · 2020-08-10T10:50:07.147

Please keep the order of CSS and JS

boostrap.min.css (i use the 4.1.0 version)
boostrap-tour-standalone.min.css
JQuery (version 3.2.1)
Popper.js
bootstrap.min.js (version 4.1.0)
bootstrap-tour-standalone.min.js

.popover.tour-tour{top:80px !important;left:20px !important;}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap tour test</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css" integrity="sha512-Ip/QaNzZ+ktVF+SKYnWTriTa3MY5PB1toFS0wmFUuqoHEmxhfUn8dQUse70nJdonrKvwmYYvAGByX9pjePYboA==" crossorigin="anonymous" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js" integrity="sha512-KlU17Q8b+noPYQtMWXM8BO08lReJoX3AHxYm7Zyi3UpYYkE4ch7r8d82DGitdIE3r82OW20VMQLVwsYyXo99sQ==" crossorigin="anonymous"></script>

</head>
<body>
    <div class="container">
        <div id="tour1">First div...</div>
        <div id="tour2">Second div...</div>
    </div>

    <script>
    var tour = new Tour({
      steps: [
      {
        element: "#tour1",
        title: "Step 1",
        content: "This is the first div"
      },
      {
        element: "#tour2",
        title: "Step 2",
        content: "This is the second div"
      }
    ]});
    
    tour.init();
    tour.start();
    </script>
</body>
</html>

Please check this snippet @Gowire it must work . Keep in mind the **order** of ```CSS``` and ```JS```. — Rayees AC, Aug 10 '20 at 10:46
Why is it necessary to use CSS before JS? Furthermore, shouldn't I avoid the "standalone" variant when bootstrap is alread included? — Gowire, Aug 10 '20 at 10:52
You added all, But they are wrong order. It make the console error. — Rayees AC, Aug 10 '20 at 10:55
Please go to this link **https://stackoverflow.com/questions/9271276/should-css-always-preceed-javascript** your question **Why is it necessary to use CSS before JS?** to be filled with this @Gowire — Rayees AC, Aug 10 '20 at 11:01

Bootstrap Tour doesn't start

1 Answers1