Ngx-Smart-Popover

Ngx-Smart-Popover is a powerful library for Angular applications that provides a flexible and customizable popover component.

Features

• Easy to use and configure
• Supports different types of popovers (e.g., tooltip, popover, dropdown)
• Supports different triggers (e.g., click, hover, focus)
• Supports dynamic content with templates and components
• Supports positioning customization and collision detection
• Supports keyboard and accessibility
• Supports animations and custom styles
• Compatible with Angular Universal

Installation

You can install the library using NPM:

npm install ngx-smart-popover --save

Usage

1. Import the NgxSmartPopoverModule in your application module:

import { NgxSmartPopoverModule } from 'ngx-smart-popover';

@NgModule({
  imports: [ NgxSmartPopoverModule ],
  // ...
})
export class AppModule { }

2. Add a popover to your template and provide the content and configuration:

<button ngxPopover="Hello, World!" [popoverPosition]="'bottom'" [popoverTrigger]="'click'">Click me</button>

Alternatively, you can use a template or a component as content:

<button [ngxPopover]="templateRef" [popoverPosition]="'top'" [popoverTrigger]="'hover'">Hover me</button>

<ng-template #templateRef>
  This is a <strong>template</strong>!
</ng-template>

<button [ngxPopover]="popoverComponentRef" [popoverPosition]="'left'" [popoverTrigger]="'focus'">Focus me</button>

<ng-template #popoverComponentRef>
  <app-popover-content></app-popover-content>
</ng-template>

3. Customize the styles and animations using CSS or Sass:

@import '~ngx-smart-popover/styles';

.my-popover {
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.5rem rgba(black, 0.1);

  &__arrow {
    width: 1rem;
    height: 0.5rem;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(black, 0.1);
  }

  &__content {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

.my-popover.fade {
  animation: fade 0.15s linear;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

4. Customize the behavior and positioning using the configuration options:

<button ngxPopover="Hello, World!" [popoverPosition]="'right'" [popoverTrigger]="'click'"
  [popoverCloseOnClickOutside]="true"
  [popoverDisableAnimation]="false"
  [popoverUseGlobalPositioning]="false"
  [popoverCollision]="true"
  [popoverPlacement]="['top', 'bottom', 'right', 'left']"
  [popoverViewportPadding]="10"
  [popoverOffset]="10">
  Click me
</button>

Conclusion

Ngx-Smart-Popover is a powerful and flexible library for Angular applications that provides a customizable and accessible popover component. With its many features and configuration options, you can easily create different types of popovers for different use cases. Try it out and see how it can improve your user experience!