Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap pop-over not loading

Tags:

What am i doing wrong here?

I tried it in a larger project and couldnt get it to work either

see my jsfiddle

http://jsfiddle.net/keithmancuso/24RQM/

UPDATE: ok so i got it working if i manually add $(".pop").popover(); but do i have to initalize them like that?

I think the answer is yes... you do have the initialize them in your own code to get it to work... the easiest way i've found to do this is just add

$(function() {     $('a[rel="popover"]').popover(); }); 
like image 681
Keith Mancuso Avatar asked Dec 10 '11 22:12

Keith Mancuso


People also ask

Why are popovers not showing up?

Popovers are opt-in for performance reasons, so you must initialize them yourself. Zero-length title and content values will never show a popover.

How to use popover in bootstrap?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

Does bootstrap 5 need Popper js?

You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper in order for popovers to work! Popovers require the tooltip plugin as a dependency.

How to disable popover bootstrap?

To hide the displayed popover, use the popover(“hide”) method.


1 Answers

I had a similar problem. Was looking for a javascript-less version of the bootstrap popup but it doesn't seem possible. If you look at the page source of http://twitter.github.com/bootstrap/javascript.html#popover at line 709-718 you will see that the example does something similar:

Heres a simplified version that works for me

<a href="#" class="btn danger"              rel="popover"              data-original-title="title"              data-content="content">popover</a> <script>   $("a[rel=popover]").popover(); </script> 

Edit: for recent versions of twitter boostrap (right now 2.2.1) you might run into a problem where when you click on a popover link, you are taken to the top of the page. This answer might be beneficial too https://stackoverflow.com/a/13759775/341692 . Basically your js should now be

<script> $("a[rel=popover]")     .popover()     .click(function(e) {          e.preventDefault();      });​ </script> 
like image 58
hajpoj Avatar answered Oct 07 '22 14:10

hajpoj