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>

Sorry... tried to send an image and it's not working. I'm getting " $element.data(bs.popover).tip is not a function" full line is: " $tip = $element.data('bs.popover') ? $element.data('bs.popover').tip() : $element.data('popover').tip(); " — Matt H, Apr 06 '18 at 19:24
Use $element.data('bs.popover').getTipElement() , which seems to be due to bootstrap version4 — Naga Sai A, Apr 06 '18 at 19:36
try changing bootstrap version to 3, it should work for both — Naga Sai A, Apr 06 '18 at 19:42

score 3 · Answer 1 · answered Apr 06 '18 at 19:48

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

Although that does work (changing to BS3), it's not on option on my project. The changing to .getTipElement() does fix a couple of errors, although more then arise. I guess the tour is made for BS3. Don't think I'm experienced enough to turn it completely BS4 friendly. Thanks for trying to help though. — Matt H, Apr 06 '18 at 21:29
thanks @MattH for update :) , if it helped to solve your issue, you can mark it as answer — Naga Sai A, Apr 06 '18 at 21:32

Popovers for "Bootstrap Tour" not working

1 Answers1