Documentation and examples for adding Angular Popovers to any element on your site.
Available in Other JavaScript Frameworks
CoreUI Angular Popover Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:
On this page
Use CoreUI Angular popover directive to create Angular popovers like those found in iOS, to any element on your site. Tutorials and examples for adding custom CoreUI Angular popovers.
Examples
Html content
- Click the button below to see a popover:
import { Component, signal } from '@angular/core';
import { ButtonDirective, PopoverDirective, TextColorDirective } from '@coreui/angular';
@Component({
selector: 'docs-popover-html-content',
templateUrl: './popover-html-content.component.html',
imports: [ButtonDirective, PopoverDirective, TextColorDirective]
})
export class PopoverHtmlContentComponent {
readonly visible = signal(true);
}<button [cPopover]="popoverHtml"
cPopoverPlacement="right"
[cPopoverTrigger]="'click'"
cButton
class="m-1"
color="danger"
size="lg"
[(cPopoverVisible)]="visible"
>
Click to toggle popover
<ng-template #popoverHtml>
<h3 class="popover-header">
Popover Title
</h3>
<div class="popover-body">
And here’s some amazing content. It’s very engaging. <i cTextColor="info">Right?</i>
</div>
</ng-template>
</button>Directions
- Hover over the buttons below to see the four popover directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
import { Component } from '@angular/core';
import { ButtonDirective, PopoverDirective } from '@coreui/angular';
@Component({
selector: 'docs-popover-directions',
templateUrl: './popover-directions.component.html',
imports: [ButtonDirective, PopoverDirective]
})
export class PopoverDirectionsComponent {}<button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet faucibus. Top!"
cPopoverPlacement="top" class="me-1"
color="secondary">Popover on top
</button>
<button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet faucibus. Right!"
cPopoverPlacement="right"
class="me-1" color="secondary">Popover on right
</button>
<button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet faucibus. Bottom!"
cPopoverPlacement="bottom"
class="me-1" color="secondary">Popover on bottom
</button>
<button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet faucibus. Left!"
cPopoverPlacement="left" class="me-1"
color="secondary">Popover on left
</button>Usage
A popover shown on hover or focus, can be dismissed by pressing the Escape key, helping satisfy the WCAG 1.4.13 “Content on Hover or Focus” success criterion.
API reference
Popover Module
import { PopoverModule } from '@coreui/angular';
@NgModule({
imports: [PopoverModule,]
})
export class AppModule() { }cPopover
directive
import { PopoverDirective } from '@coreui/angular'