| 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>
