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