jquery - 引导程序，弹出窗口不起作用

Question

我想向这个字形图标添加一个弹出框，但是我无法让它工作。

HTML

<a href="#" data-toggle="popover" title="Popover Header" data-content="You must branch to this flow first, before you can return to the original flow"><span ng-show="flow.branched_from.length==0" class="glyphicon glyphicon-question-sign" aria-hidden="true" ></span></a>

并在文件末尾：

<script>
  $(document).ready(function(){
     $('[data-toggle="popover"]').popover(); 
  });
</script>

我在文件的开头包含了引导程序。

我看不出我做错了什么，工具提示有效。

Answer 1

我认为这是因为您没有设置data-placement属性：

这是一个带有您自己的代码的引导程序，但添加了data-placement='bottom'

引导：http : //www.bootply.com/1AvLR4cUag

代码：

<a href="#" data-toggle="popover" title="Popover Header" data-placement="bottom" data-content="You must branch to this flow first, before you can return to the original flow"><span ng-show="flow.branched_from.length==0" class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</a>

Answer 2

注意事项：

1. Popovers 依赖 3rd 方库 Tether 进行定位。您需要将其导入索引文件。
2. 弹出框需要工具提示插件作为依赖项。
3. 您还需要导入 JQuery 库。

查看下面的代码片段：

// Initialize tooltip component
$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function() {
  $('[data-toggle="popover"]').popover()
})

body {
  padding-top: 1em;
}
.padding-a {
  padding-top: 25px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

<div class="container-fluid">
  <a href="#" data-toggle="popover" title="Popover Header" data-content="You must branch to this flow first, before you can return to the original flow">
    <span ng-show="flow.branched_from.length==0" class="glyphicon glyphicon-question-sign padding-a" aria-hidden="true">
     </span>
  </a>
</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

<!-- Bootstrap 4 Alpha JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

<!-- Initialize Bootstrap functionality -->

柱塞链接