Twitter's Bootstrap Popover: Won't work, even when other JS is working ok

Question

I want to set up a popover using Twitter's Bootstrap. I've successfully used other JavaScript (dropdown, and tooltips), but I can't get this one working.

I've got this html inside my page:

<a href="#" id="matriz" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" title="A title">hover for popover</a>

I've set inside the document body this:

<script>
  $(function() { 
    $('#matriz').popover({placement: 'bottom', trigger: 'hover', offset: 1});
  });
</script>

I've called the files like this, using hotlinks:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tooltip.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-dropdown.js"></script>
<script src="https://github.com/twitter/bootstrap/raw/master/js/bootstrap-popover.js"></script>
<script src="https://github.com/twitter/bootstrap/raw/master/js/bootstrap-twipsy.js"></script>

Answer 1

BTW, it's redundant to use bootstrap-tooltips.js and bootstrap-twipsy.js. Tooltips replaced Twipsy.

Answer 2

The important piece you're missing is the main CSS file, bootstrap.css .

Demo: http://jsfiddle.net/Sn2Zz/

^{( I wasn't sure where to hotlink, so I pasted the content of bootstrap.css .)}

Particularly, you need the .popover-* styles.

Chances are it was "working", but you weren't able to see it because the popup's position in the DOM is right before the closing </body> tag.

Answer 3

是的-如果您从其他位置加载CSS，则一切正常： http : //jsfiddle.net/dirkk0/5DGef/