Popovers for “Bootstrap Tour” not working

Question

I've been trying to install a tour onto my site using "Bootstrap Tour", I'm very new to Javascript and coding in general and I've been at it all day. Figured I'd come on here to ask people who are more experienced.

hi1 works sometimes, but even then, it never moves onto hi2. The popover is always broken too.

I've tried to put a little demo together below.

  // Instance the tour var tour = new Tour({ name: "tour", steps: [ { element: "#hi", title: "Title of my stepbjhbhjbhm", content: "Content of my step buhjnkjnkuhj" }, { element: "#hi2", title: "Title of my step", content: "Content of my step" }], container: "body", smartPlacement: true, keyboard: true, storage: false, debug: false, backdrop: false, backdropContainer: 'body', backdropPadding: 0, redirect: true, orphan: false, duration: false, delay: false, basePath: "", template: "<div class='popover tour'><div class='arrow'></div> <h3 class='popover-title'></h3> <div class='popover-content'></div> <div class='popover-navigation'> <button class='btn btn-default' data-role='prev'>« Prev</button> <span data-role='separator'>|</span> <button class='btn btn-default' data-role='next'>Next »</button></div><button class='btn btn-default' data-role='end'>End tour</button></div>" }); // Initialize the tour tour.init(); $( document ).ready(function() { // Start the tour tour.start(); }); </script> <!-- end tour --> 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <button class="btn" id="hi">Button 1</button> </div> <div class="col-md-6"> <button class="btn" id="hi2">Button 1</button> </div> </div> </div> 

Answer 1

To achieve expected change the bootstrp version to 3 , as the error from the console is due to the bootstrap V4

cdn files which works

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap-tour/0.9.1/js/bootstrap-tour.min.js"></script>

code sample - https://codepen.io/nagasai/pen/rdQOjo

For the erorr in the console- Uncaught TypeError: $element.data(...).tip is not a function , check this link for more details https://github.com/sorich87/bootstrap-tour/issues/619