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: '<div class="siteClass">Open Site popover</div>', 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 {

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

1 Like