Bootstrap, popover not working

Question

Я хочу добавить 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> 

Я включил самозагрузки в начале моего файла.

Я не вижу, что я делаю неправильно, всплывающие подсказки работают.

Answer 1

Я думаю, это потому, что вы не установили 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> 

Answer 2

Очки отметить:

1. Popovers полагаются на 3-сторонней библиотеки Tether для positioning.You нужно импортировать его в файл индекса.
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 -->

PLUNKER link