javascript - "Bootstrap Tour"的弹出窗口不起作用

Question

我一直在尝试使用“Bootstrap Tour”在我的网站上安装一个导览，我对 Javascript 和一般编码还很陌生，而且我已经做了一整天。我想我会来这里问更有经验的人。

hi1 有时会起作用，但即便如此，它也永远不会移动到 hi2 上。弹出窗口也总是坏掉。

我试着在下面做了一个小演示。

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

为了达到预期的效果，将 bootstrp 版本更改为 3，因为控制台的错误是由于 bootstrap V4

有效的cdn文件

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

代码示例 - https://codepen.io/nagasai/pen/rdQOjo

对于控制台中的错误 - Uncaught TypeError: $element.data(...).tip is not a function ，查看此链接了解更多详情 https://github.com/sorich87/bootstrap-tour/issues/619