ng-tooltip
Clickable angular tooltip popup
Demo
Visit ng-tooltip working online demo here: https://angular-ng-tooltip-playground.stackblitz.io OR see more about the code via stackblitz: https://stackblitz.com/edit/angular-ng-tooltip-playground
Installation
Install ng-tooltip via npm by running this command:
$ npm install @independer/ng-tooltip --save
Usage
Add TooltipModule
to your main app.module.ts
// app.module.ts import { TooltipModule } from '@independer/ng-tooltip'; ... @NgModule({ imports: [ ..., TooltipModle.forRoot() // This .forRoot() is necessary ], ... }) export class AppModule { }
Add <ind-tooltip-container></ind-tooltip-container>
into your app main template, app.component.html. This tooltip container will be the parent DOM element where all the tooltips will be appended inside.
<!--app.component.html --> <router-outlet></router-outlet> <ind-tooltip-container></ind-tooltip-container>
Default tooltip
You can assign any element to be the tooltip trigger. If you don't, by default the tooltip trigger will be a question mark icon like this:
The icons are available in 3 different sizes sm, md, lg
Tooltip with icon lg <ind-tooltip content="This is a simple tooltip which uses content attribute" size="lg"></ind-tooltip\> Tooltip with icon md <ind-tooltip content="This is a simple tooltip which uses content attribute" size="md"></ind-tooltip\> Tooltip with icon sm (default) <ind-tooltip content="This is a simple tooltip which uses content attribute" size="sm"></ind-tooltip>
Custom tooltip trigger
You can also specify any custom HTML element as the tooltip trigger and the trigger will not be the circle question mark icon anymore.
<ind-tooltip content="Tooltip without question mark"> <a>Click this link!</a> </ind-tooltip\>
Tooltip with header and content
Inside the tooltip you can write optionally header and content separately.
<ind-tooltip header="This is tooltip header" content="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."></ind-tooltip>
Tooltip with HTML content
It is also possible to have custom HTML content inside the tooltip by declaring <ng-template #tooltipContentTemplate></ng-template>
inside <ind-tooltip></ind-tooltip>
. The hash tooltipContentTemplate
will mark it as HTML content inside tooltip, so it msut be written exactly the same.
<ind-tooltip header="This is a tooltip with HTML elements"> <ng-template #tooltipContentTemplate> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum. <h4>And a button</h4\> <button>A button</button\> </ng-template> </ind-tooltip>