CODEWITHSUNDEEP
angularjstwitter-bootstrap
user3799365
user3799365

Reputation: 1087

bootstrap data-toggle="popover"not working

I am using the code provided by the bootstrap page http://getbootstrap.com/javascript/#popovers-usage and for some reason I cannot get the popover boxes to work. Can someone please help. Here is my plunker http://plnkr.co/edit/ojSNWiSXOOSUw8xhehp4?p=preview

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Upvotes: 1

Views: 4636

Answers (2)

sylwester
sylwester

Reputation: 16498

If you want to use popover not as Angularjs directive you have to enable them

$(function(){
$('button').popover()
});

please see here: http://plnkr.co/edit/kZMsITSss22v19pbc0Zo?p=preview

if you want use popver using angular UI Bootstrap please see demo here:http://plnkr.co/edit/BB7V60qIgoo4D5U8igzb?p=preview

Upvotes: 1

bmleite
bmleite

Reputation: 26880

In order to use Bootstrap JS features you need to convert them to Angular directives.

AngularUI Team has already done that, so you just need to use Angular UI Bootstrap, and in this particular case, their popover directive.

Upvotes: 0

Related Questions