Popovers don't work with bootstrap?

Question

Following the documentation I copied:

<div class="container">
    <div class="row">
        <div class="bs-docs-example" style="padding-bottom: 24px;">
            <a href="#" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?"
            data-original-title="A Title">Click to toggle popover</a>
        </div>
    </div>
</div>

JSfiddle

However it isn't working. What am I doing wrong?

Answer 1

I got it to work by doing two things:

1. As Popover relies on Tooltip, make sure bootstrap-tooltip.js is included before bootstrap-popover.js.

2. Activate the plugins with a line like $('.container a').popover();

To have the popup at the top add data-placement="top" to the a tag.

Answer 2

Popovers are not initialized by default. If you included an all-inclusive bootstrap.js (v 2.2, 2.3), initialize it by:

$('a[data-toggle=popover]').popover();