Beautiful Animated Tooltip & Popover Library For Angular – Helipopper

Author: ngneat
Official Page: Go to website
Publish Date: June 18, 2020
License: MIT

Description:

Helipopper is a feature-rich, animated tooltip & popover library for Angular applications.

Features:

  • Smart auto-position.
  • Custom alignment & placement.
  • Lazy registration for better performance.
  • Custom trigger events: hover, click, etc.
  • Allows you to customize the template.
  • And much more.

Basic usage:

1. Install and import the Helipopper library into your Angular project.

ng add @ngneat/helipopper
import { HelipopperModule } from '@ngneat/helipopper';

2. Add the Helipopper to your app module.

@NgModule({
  declarations: [AppComponent],
  imports: [HelipopperModule.forRoot()],
  bootstrap: [AppComponent]
  ...
})
export class AppModule {}

3. Define the tooltip content.

<button helipopper="Tooltip Content Here">
  I have a tooltip
</button>

4. Create a popover with your own template.

<ng-template #tpl>
  <div *ngFor="let msg of messages">{{ msg }}</div>
  <button (click)="talk()">Click Me</button>
</ng-template>

Preview:

Beautiful Animated Tooltip & Popover Library For Angular - Helipopper


You Might Be Interested In:

Add Comment