'Bootstrap Tour "Tour is not defined"

I am new to Bootstrap Tour, and I was working on a simple site to learn how to use Bootstrap Tour. However, there is one error that is causing some confusion. Every time I try to run this code, the console gives me the error "Uncaught Reference Error: Tour is not defined." Can anyone help me explain the problem?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Tour Test</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <!-- Bootstrap Tour CSS -->
    <link href="../TestFolder/bootstrap-tour/build/css/bootstrap-tour.min.css" rel="stylesheet">

    <script>
            var tour = new Tour({
              steps: [
                {
                  element: "#content",
                  title: "Title of my step",
                  content: "Content of my step",
                },
                {
                  element: "#content1",
                  title: "Title of my step",
                  content: "Content of my step",
                }
              ]
            });
    </script>

</head>

<body>

    <div id="content">
      Hello, World!
    </div>
    <br>
    <br>
    <br>
    <div id="content1">
      Another Hello, World!
    </div>

    <!-- <script>
        var tour = new Tour();

        // Add your steps. Not too many, you don't really want to get your users sleepy
        tour.addSteps([{
          element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
          title: "Title of my step", // string - title of the popover
          content: "Content of my step" // string - content of the popover
        }, {
          element: "#content1",
          title: "Title of my step",
          content: "Content of my step"
        }]);

        // Initialize the tour
        tour.init();

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

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <!-- Poopper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

    <!-- Bootstrap Javascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <!-- Boostrap Tour Javascript -->
    <script src="../TestFolder/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>

</body>
</html>

jquery twitter-bootstrap

Solution 1:^[1]

Move your script after your Bootstrap Tour file is loaded.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    	<title>Bootstrap Tour Test</title>

    	<!-- Bootstrap CSS -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    	<!-- Bootstrap Tour CSS -->
    	<link href="../TestFolder/bootstrap-tour/build/css/bootstrap-tour.min.css" rel="stylesheet">

    </head>
   	
   	<body>

   		<div id="content">
		  Hello, World!
		</div>
		<br>
		<br>
		<br>
		<div id="content1">
		  Another Hello, World!
		</div>

		<!-- <script>
			var tour = new Tour();

			// Add your steps. Not too many, you don't really want to get your users sleepy
			tour.addSteps([{
			  element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
			  title: "Title of my step", // string - title of the popover
			  content: "Content of my step" // string - content of the popover
			}, {
			  element: "#content1",
			  title: "Title of my step",
			  content: "Content of my step"
			}]);

			// Initialize the tour
			tour.init();

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

   		<!-- jQuery -->
   		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

   		<!-- Poopper.js -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

		<!-- Bootstrap Javascript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

		<!-- Boostrap Tour Javascript -->
		<script src="../TestFolder/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
    
        	<script>
    			var tour = new Tour({
				  steps: [
				    {
				      element: "#content",
				      title: "Title of my step",
				      content: "Content of my step",
				    },
				    {
				      element: "#content1",
				      title: "Title of my step",
				      content: "Content of my step",
				    }
				  ]
				});
		</script>

    </body>
    </html>

Solution 2:^[2]

In HTML the is loaded first before the .

So since your is inside the , the function is initiated before the js of the imported file is initialized.

One fix would be move the import above the on the

Solution 3:^[3]

If you are using Angular 2+ (and bootstrap 4), then you need to add the js and css to your angular.json file. After installing the library (via npm for example). Update the angular.json file.

"styles": [..
           ..
          "node_modules/bootstrap-tour/build/css/bootstrap-tour.min.css"
          ],
"scripts": [..
            ..
          "node_modules/bootstrap-tour/build/js/bootstrap-tour.min.js"
        ]
      },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Win
Solution 2	Sanmitra Nagaraj
Solution 3	DancingDad

'Bootstrap Tour "Tour is not defined"

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]