Feature request: Popover – add css class

6 thoughts on “Feature request: Popover – add css class”

1. @pkozlowski-opensource what if there are multiple popovers in a page and wanted to apply styles to one of the popovers. Using general CSS will affect all popovers. So having an option to add the class will be a good option.

   The solution given above stands valid If we wanted to use the same styling across all popovers.

2. I also support this feature request to add a css class to one of my popovers:
   

   .popover.error-pop {
   	border-color: #dc3545;
   	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
   }

   At the moment i was able to inject my error-pop class with the placement, but this is just a bad hack

   <button type="button" class="btn btn-sm btn-outline-success fa fa-check"
   				placement="bottom error-pop" [ngbPopover]="popError" #p="ngbPopover" (clickOutside)="p.close()"></button>

   Edit

   
   No need of that feature if you attach the css class to a parent element:

   .ng-invalid .popover {
   	border-color: #dc3545;
   	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
   }

3. @JavanXD seems that still needed this feature.

   What if you have popover container set as ‘body’ and it is attached to DOM with no parent elements?
   The popover parent is in the first red Angular App block while the popover is in the second one on the bottom and it has no parents.

   

   The hack with placement indeed adds provided class to the popover, but it breaks the placement itself.
   <div [ngbPopover]="productListContent" #productList="ngbPopover" placement="right dc-products" container="body"> <div class="badge badge-default">New</div> </div>

4. Agreed that this would be a useful feature. Like others here I need to apply custom styling to some but not all popovers on my page. I worked around it by specifying a particular element as the container but it seems a bit hacky — IMO there should be a way to target a particular popover regardless of its position in the DOM.

5. I’m really not finding any solution to this issue, especially when container is body. We need the ability to apply classes so that we can style some, but not all, popovers.

6. For anyone still struggling with this, I was googling this a lot without finding anything useful, but this is actually already supported from long time ago if you look at the popover api. There is actually a popoverClass directive which lets you have a custom class on any popover: https://ng-bootstrap.github.io/#/components/popover/api Should’ve read the docs more carefully 🤦