Bootstrap, popover not working

Question

I want to add a popover to this glyphicon, however I cannot get it to work.

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>

and at the end of the file:

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

I have included bootstrap at the beginning of my file.

I don't see what I'm doing wrong, tooltips work.

Have you any javascript error ? Have you include jquery too ? — BENARD Patrick, May 07 '15 at 09:45
Take a look at this https://jsfiddle.net/fatbb967/. I included all the JS and CSS necessary, and the edge version of jQuery, and it worked. Maybe there are some resources loading problems. Can you specify the versions used? — cr0ss, May 07 '15 at 10:14
@cr0ss I'm using jQuery v1.11.1 , could this be causing the problem? I'm using Bootstrap v3.3.2 — STEP, May 09 '15 at 08:46

score 1 · Answer 1 · answered May 07 '15 at 12:25

I think it's because you didn't set the data-placement attribute :

Here is a bootply with your own code , but with adding data-placement='bottom'

bootply: http://www.bootply.com/1AvLR4cUag

code :

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

score 0 · Answer 2 · answered Feb 15 '17 at 06:37

Points to note :

Popovers rely on the 3rd party library Tether for positioning.You need to import it into your index file.
Popovers require the tooltip plugin as a dependency.
You need to import JQuery library too.

Check out the code snippet below:

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

Bootstrap, popover not working

2 Answers2