Geek Answers Handbook

Why is my Bootstrap popover not working?

I am trying to use Bootstrap popover . Therefore, I copied the exact code from the example to my site, which, unfortunately, does not work. I pasted the full code below and created jsfiddle here .

I tried putting it in the bootstrap container and in rows and columns, but nothing works.

Anyone how can I make this violin work? All tips are welcome!

<!DOCTYPE html> <html lang="en"> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here some amazing content. It very engaging. Right?">Click to toggle popover</button> </body> </html>
+7
javascript html css twitter-bootstrap popover
source share
7 answers

You forgot this: http://getbootstrap.com/javascript/#opt-in-functionality

For performance reasons, a tooltip and popover data-apis are an option, meaning you must initialize them yourself.

One way to initialize all the tooltips on a page is to select them by the data-toggle attribute:

 $(function () { $('[data-toggle="popover"]').popover() })
+18
source share

Should add

 $(function () { $('[data-toggle="popover"]').popover() });

working example here

+2
source share

For performance reasons, you should initialize the popover yourself:

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

Link

Be sure to add the jQuery library before downloading.

jsFiddle

+2
source share

You lacked a function call in your fiddle, and the jquery library was also missing

I added missing dependencies in your example

check script: https://jsfiddle.net/L41g98qx/9/

here is the function call 

 $(function () { $('[data-toggle="popover"]').popover() })

The text below is copied from getbootstrap.com, here is what they want to say about the popover plugin

Selection functions

For performance reasons, a tooltip and popover data-apis are an option, meaning you must initialize them yourself.

One way to initialize all the popovers on the page is to select them by the data-toggle attribute: Copy

$(function () { $('[data-toggle="popover"]').popover() })

+2
source share

You need to add this code to <head>

 $(function () { $('[data-toggle="popover"]').popover() })
+1
source share

you can add the id or class attribute to the button and call the popover method on that button. Here is a working fiddle. http://jsfiddle.net/uqLor9ze/ .

Here is sample code from fiddle

  $('#pop').popover();
0
source share
 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here some amazing content. It very engaging. Right?" id="example">Dismissible popover</a>

This method is required.

 $('#example').popover('show');

Demo

0
source share

More articles:


All Articles