Bootstrap popover is not working on my own site

Question

So what I want is to use popovers as an information popup, here is the code I use:

<li>Commercial Use <a href="#" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" role="button" data-original-title="A Title"><i class="fa fa-question-circle"></i></a></li>

it links me just to #

This is in my footer:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/js/bootstrap.js"></script>

It was in my head before, but I moved it back to the footer because I thought it could be the problem.

I have tried the standard code from http://getbootstrap.com/javascript/#popovers but that doesn't work either! If you go to http://getbootstrap.com/javascript/#popovers you see that it say's that the tooltip plugin needs to be included, but when going to http://getbootstrap.com/javascript/#js-individual-compiled you see that according to bootstrap:

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Include only one.

I'm pretty much lost right now.

I hope someone can help me.

thanks in advance,

MrBlackDrag0nfly

Answer 1

I am not pretty sure where's the problem, make sure that:

(1) You have included the bootstrap css

(2) Try insert the data-container attr. and and "id" as such:

<li>Commercial Use <a href="#" id="myPopovers" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" role="button" data-original-title="A Title" data-container="body"><i class="fa fa-question-circle"></i></a></li>

(3) From bootstrap, it says that:

**Opt-in functionality**
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must       initialize them yourself.

This means you should initialise it via JavaScript as such:

$(document).ready(function(){
  $("#myPopovers").popover(); // or $("#myPopovers").popover('show');
});