Beautiful Animated Tooltip & Popover Library For Angular – Helipopper

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: