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

angularjs

#1

Hi,

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,
replace:true,
scope:true,
link: function (scope, el, attrs) {
scope.label = attrs.popoverLabel;
var content = scope.getSiteHTML();
$(el).popover({
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 {
width:400px;
}

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