12

I'm trying to use the Bootstrap popover. So I copied the exact code from the example into my website, which unfortunately doesn't work. I pasted the full code below and created a jsfiddle here.

I tried putting it in a bootstrap container and in rows and columns, but nothing seems to work.

Does anybody how I can get that fiddle to 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's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
kramer65
  • 50,427
  • 120
  • 308
  • 488
  • @Gunaseelan you don't need to if you're including `bootstrap.min.js` like OP is. – James Donnelly May 05 '15 at 11:10
  • I've updated your JSFiddle demo to include jQuery, as otherwise it was giving an error about jQuery being missing (despite being present in your snippet). – James Donnelly May 05 '15 at 11:12
  • LOL, 6 answers in 10 minutes about the same thing: `$('[data-toggle="popover"]').popover()` – George Netu May 05 '15 at 11:17
  • `For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.` How come you get the document but you haven't seen it. – R Lam May 05 '15 at 11:20
  • Possible duplicate of [Bootstrap popover is not working](http://stackoverflow.com/questions/26562366/bootstrap-popover-is-not-working) – Dakotah North Jul 07 '16 at 04:24

7 Answers7

39

You forgot this : https://getbootstrap.com/docs/3.4/javascript/#callout-popover-opt-in

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

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

$(function () {
    $('[data-toggle="popover"]').popover()
})
Community
  • 1
  • 1
Seblor
  • 6,947
  • 1
  • 25
  • 46
5
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>

This method is required

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

DEMO

sheshadri
  • 1,207
  • 9
  • 21
3

Should add the 

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

working example here

vamsikrishnamannem
  • 4,817
  • 5
  • 23
  • 34
3

For performance reason you should initilize popover by yourself :

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

Reference

Be sure to add the jQuery library before bootstrap.

jsFiddle

jmgross
  • 2,306
  • 1
  • 20
  • 24
3

You were missing Function call into your fiddle and jquery library was also missing

I have added missing dependencies into your example

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

here is a popover function call 

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

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

Opt-in functionality

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

One way to initialize all popovers on a page would be to select them by their data-toggle attribute: Copy

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

Nilesh Mahajan
  • 3,506
  • 21
  • 34
2

You need to add this code in body just above the </body> tag 

$(function () {
$('[data-toggle="popover"]').popover()
})
khurram
  • 946
  • 1
  • 13
  • 34
0

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

Here is the example code from fiddle

 $('#pop').popover();
Kamran
  • 2,711
  • 2
  • 17
  • 24