Search code examples
bootstrap-4bootstrap-tour

Bootstrap Tour doesn't start

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...

Solution

  • Please keep the order of CSS and JS

    1. boostrap.min.css (i use the 4.1.0 version)

    2. boostrap-tour-standalone.min.css

    3. JQuery (version 3.2.1)

    4. Popper.js

    5. bootstrap.min.js (version 4.1.0)

    6. 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>