Bootstrap，popover不起作用

我想添加一个popover到这个glyphicon，但是我不能让它工作。Bootstrap，popover不起作用

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>

我已经在我的文件的开头包含引导。

我看不到我做错了什么，工具提示工作。

来源

2015-05-07 STEP

你有任何JavaScript错误？你也包含jquery吗？ – pbenard

@YenneInfo没有错误，并包含jquery – STEP

看看这个https://jsfiddle.net/fatbb967/。我包含了所有需要的JS和CSS，以及jQuery的边缘版本，并且它工作正常。也许有一些资源加载问题。你能指定使用的版本吗？ – cr0ss

我想那是因为你没有设置data-placement属性：

这里是你自己的代码bootply，但与添加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>

来源

2015-05-07 12:25:41 pbenard

注意事项：

Popovers依靠第三方库系绳的positioning.You 需要将其导入到你的索引文件。
Popovers需要工具提示插件作为依赖项。
您还需要导入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 -->

PLUNKER link

来源

2017-02-15 06:37:22

Bootstrap，popover不起作用

回答

相关问题