Geek Answers Handbook

Bootstrap UI: how to change popover background color

I am trying to change the background color of Bootstrap UI popover by creating custom popover classes to override existing ones (e.g. popover1 , popover2 , etc. instead of popover ). I know this works for vanilla bootstraps popovers (here's a fiddle , but it doesn't seem to work for Popsters Bootstrap UI).

When I apply the same method to the PopUp Bootstrap UI, it just shows a tiny blank click. All I have done so far is change

 <a class="btn btn-primary popover-container" id="popover" data-toggle="popover" data-placement="right" data-container="body" rel="log-popover">Log level</a>

to

 <a class="btn btn-primary popover-container" popover-placement="right" popover-template="'partials/loglevel-template.html'" popover-trigger="click">Log level</a>

LogLevel-template.html

 <div class="popover1"> <div class="arrow"></div> <div class="popover-content"> <p>some content</p> </div> </div>

When I delete the popover1 class, it works, so there is no functional problem with just displaying popover.

I like to use Bootstrap UI popovers more because you don’t need to use any of this hard tempoolery coding in jQuery (in fact you don’t need to write any jQuery at all). I just can't figure out how to change the background color of Bootstrap UI popovers. Before I headed down the rabbit hole, I wanted to know if anyone else had achieved this, or if there is an easy fix (maybe Popover for Bootstrap UI uses a different set of classes than vanilla popovers). If this is a matter of overriding some CSS classes, that would be a dream.

+5
source share
1 answer

This, unfortunately, is not documented in the UI Bootstrap documentation, and I (unfortunately) took several hours to find this extremely simple solution, but hopefully it will save some other people. You can add the popover-class attribute to the element on which you place the uib-popover , and then draw a popover accordingly. See below for more details.

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) { $scope.dynamicPopover = { content: 'Hello, World!', templateUrl: 'myPopoverTemplate.html', title: 'Title' }; }); 
 .trigger-popover-button { margin: 25% 0 0 10%; } .custom-dynamic-popover-class { color: red; } .custom-dynamic-popover-class > .popover-inner > .popover-title { background: yellow; } .custom-dynamic-popover-class > .popover-inner > .popover-content { background: blue; } 
 <!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> <script src="//angular-ui.imtqy.com/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="PopoverDemoCtrl"> <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" popover-class="custom-dynamic-popover-class" type="button" class="btn btn-default trigger-popover-button"> Popover With Template </button> <script type="text/ng-template" id="myPopoverTemplate.html"> <div>{{dynamicPopover.content}}</div> <div class="form-group"> <label>Popup Title:</label> <input type="text" ng-model="dynamicPopover.title" class="form-control"> </div> </script> </div> </body> </html>
+3
source

More articles:


All Articles