ng-tooltip

Clickable angular tooltip popup
​

Online Demo (Stackblitz)

https://independer-ng-tooltip-playground.stackblitz.io

Compatibility

Tested and published with Angular 9.1.1
​

Installation

This package has a peer dependency on @angular/cdk, so you have to first install it by running:

``bash
$ npm install @angular/cdk@9.x --save
`

Install ng-tooltip via npm by running this command:
`bash
$ npm install @independer/ng-tooltip --save
`



Usage



Add TooltipModule to your main app.module.ts
​
`ts
// app.module.ts
​
import { TooltipModule } from '@independer/ng-tooltip';

@NgModule({
imports: [
TooltipModule.forRoot() // This .forRoot() is necessary
]
})
export class AppModule { }
`
​
​

Variations

​

$3

By default, the tooltip trigger will be a question mark icon like this: !tooltip icon



​
The icons are available in 3 different sizes sm, md, lg
`html
Tooltip with icon lg
Tooltip with icon md
Tooltip with icon sm (default)
`

$3

You can replace the tooltip trigger (question-mark icon) with your own icons or custom HTML element.
`html

Click this link!

`
​

$3

Inside the tooltip you can write optionally header and content separately.
`html

`
​

$3

It is also possible to have custom HTML content inside the tooltip by declaring inside . The hash tooltipContentTemplate will mark it as HTML content inside tooltip, so it msut be written exactly the same.
​
`html


Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum.

And a button

A button


``