Angular JS custom popover directive - How to override .popover class for individual popovers




Can anyone please tell how to create AngularJS custom individual popovers with different width and height. Basically, I want overwrite .popover class for individual popovers.

I used AngularJS custom directive for popover creation like below.

customApp.directive('sitePopover',['$compile', function($compile) {
return {
restrict: 'A',
template: '

Open Site popover
transclude: true,
link: function (scope, el, attrs) {
scope.label = attrs.popoverLabel;
var content = scope.getSiteHTML();
trigger: 'click',
html: true,
content: $compile(content)(scope),
placement: attrs.popoverPlacement,



I have to create many popovers in my application, I have to give different width and height for them.
when I override the .popover class in my CSS like, all the popovers are getting width 400px.

.popover {

I want give different width for each individual popover. Any suggestions how can I achieve that?