CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrappopover
user1438003
user1438003

Reputation: 6793

Popovers don't work with bootstrap?

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?

Upvotes: 4

Views: 8791

Answers (3)

pri
pri

Reputation: 1553

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

Upvotes: 7

pradeep
pradeep

Reputation: 306

<a href="#" id="LinkId">Text</a>

In document ready,

$("#LinkId").popover({ title: '', content: "Popover Content", placement: 'left|top|etc', trigger: 'hover' });

All you need include is bootstrap.js.

Upvotes: 3

Owlvark
Owlvark

Reputation: 1803

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.

Upvotes: 7

Related Questions