引导程序，弹出窗口不起作用答案

【问题标题】：Bootstrap, popover not working引导程序，弹出窗口不起作用
【发布时间】：2015-07-17 19:22:39
【问题描述】：

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

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>

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

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

【问题讨论】：

您有任何 javascript 错误吗？你也包含 jquery 吗？
@YenneInfo 没有错误，包含 jquery
看看这个jsfiddle.net/fatbb967。我包含了所有必要的 JS 和 CSS，以及 jQuery 的边缘版本，它工作正常。也许有一些资源加载问题。你能指定使用的版本吗？
@cr0ss 我正在使用 jQuery v1.11.1，这会导致问题吗？我正在使用 Bootstrap v3.3.2

标签： jquery twitter-bootstrap tooltip popover tether

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

注意事项：

Popovers 依赖第三方库 Tether 进行定位。你需要将其导入您的索引文件。
Popovers 需要工具提示插件作为依赖项。
您还需要导入 JQuery 库。

查看下面的代码 sn-p：

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

PLUNKER link

【讨论】：