4

I have used a bootstrap pop over in ng-repeat. Below code snippet for the same

 <div class="useBootstrap col-sm-2" data-toggle="popover" data-container="body" data-content="AdditionalContents to be shown" data-trigger="click hover">
    {{ row.FileName | limitTo: 15 }}{{row.FileName.length > 15 ? '...' : ''}}
</div>

I have a bootstrap version *! * Bootstrap v3.3.4 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. in my application

If I include a lower version of bootstrap - It renders perfectly.The 1st image when including 3.0, 2nd image if i use 3.3, How can i make it work in 3.3 version because I cannot change the version of bootsrap in my application now just for this pop up.

  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

different

KeenUser
  • 5,305
  • 14
  • 41
  • 62

1 Answers1

0

I see that you are using the Vanilla Bootstrap popovers. I tried using them too, but I never achieved my desired outcome. So, I investigated an alternative, Angular BootstrapUI (otherwise known as BootstrapUI), which solved most of my problems.

This probably isn't the answer you're looking for, but I would suggest trying out the BootstrapUI popovers. I've found the upside to using these popovers makes integrating templates much easier, and they don't rely on extraneous jQuery. The downside is that their style is more difficult to customize. I still haven't figured out how to have popovers with different styles in BootstrapUI. In Vanilla Bootstrap, customizing popover styles is fairly trivial.

I haven't had any problems with Vanilla Bootstrap's JS, but for now you should stick to a version that is most compatible with your app.

UltraSonja
  • 881
  • 1
  • 20
  • 33