NgxCxlPopover

The best popover package because it's easy to use and customizable .

Installation

You can use either the npm command-line tool to install packages.

NPM

npm i ngx-cxl-popover

Usage ⁉

• import NgxCxlPopoverModule module

@NgModule({
  imports: [
   /* .... */
   NgxCxlPopoverModule
   /* .... */
  ],
})

• add directive ngxCxlPopover on the element.
• write your awesome title popoverTitle.
• write your awesome content popoverContent.

<h1 ngxCxlPopover popoverTitle="Hello" popoverContent="👋">Hello</h1>

if you want use customized templates for the title and content then let's go to the next level 👍

Advanced

Custom Templates

<h1
  ngxCxlPopover
  popoverTitle="Hello"
  popoverContent="👋"
  [titleTemplate]="titleTemplate"
  [contentTemplate]="contentTemplate"
>
  Hello
</h1>

<!-- Custom Templates -->
<ng-template #titleTemplate>
  <img src="..." alt="..." />
  <p>...</p>
</ng-template>

<ng-template #contentTemplate>
  <img src="..." alt="..." />
  <p>...</p>
</ng-template>
<!--  -->

Options

Attribute	Type	Description	Default
enableScroll	boolean	enable scrolling into popover content	false
scrollSpeed	number	the speed of scrolling between 10 and 100	10
width	number	set popover fixed width	200px
height	number	set popover fixed height	300px
popoverTitle	string	write the title phase	null
popoverContent	string	write the content phase	null
titleTemplate	TemplateRef	reference to the custom title template	null
contentTemplate	TemplateRef	reference to the custom content template	null
placementHorizontal	number	force popover to show in specific direction and has options 'right' , 'left' , null	null
placementVertical	number	force popover to show in specific direction and has options 'top' , 'bottom' , null;	null
animation	boolean	enable animation	true
animationDelay	number	change animation time in milliseconds	100

Customize Style

.ngx-cxl-popover-container {
}
.ngx-cxl-popover-container .ngx-cxl-popover-title {
}
.ngx-cxl-popover-container .ngx-cxl-popover-content {
}

Simplest and Easiest 👌💖👏

Contribution

I welcome you to fork and add more features into it. If you have any bugs or feature request, please create an issue at github repository.

License

MIT