Why does my Bootstrap popover not work?

问题

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>

回答1:

You forgot this : http://getbootstrap.com/javascript/#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 tooltips on a page would be to select them by their data-toggle attribute:

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

回答2:

Should add the

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

working example here

回答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

回答4:

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() })

回答5:

You need to add this code in <head>

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

回答6:

<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

回答7:

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();

来源：https://stackoverflow.com/questions/30051283/why-does-my-bootstrap-popover-not-work

标签

javascript

html

css

twitter-bootstrap

popover