https://github.com/independer/ng-tooltip
Angular tooltip based on click event
https://github.com/independer/ng-tooltip
Last synced: 9 months ago
JSON representation
Angular tooltip based on click event
- Host: GitHub
- URL: https://github.com/independer/ng-tooltip
- Owner: Independer
- Created: 2018-03-14T17:12:04.000Z (almost 8 years ago)
- Default Branch: dev
- Last Pushed: 2022-06-02T19:58:15.000Z (over 3 years ago)
- Last Synced: 2024-10-29T05:48:49.389Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 736 KB
- Stars: 2
- Watchers: 4
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
### Default tooltip
By default, the tooltip trigger will be a question mark icon like this: 
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)
```
### Custom tooltip trigger
You can replace the tooltip trigger (question-mark icon) with your own icons or custom HTML element.
```html
```
### Tooltip with header and content
Inside the tooltip you can write optionally header and content separately.
```html
```
### Tooltip with HTML content
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
```