Tooltip is a simple and unobtrusive tooltips component created for the Angular 4+ app.
angular 8 tooltip on hover, tooltip for input field angular, angular tooltip on hover css, custom tooltip angular, ng2 tooltip directive, syncfusion tooltip angular
How to make use of it:
Installation:
# NPM $ npm install @cloukit/tooltip --save
1. In your module.ts:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CloukitDropoutModule } from '@cloukit/dropout'; import { CloukitThemeModule } from '@cloukit/theme'; import { CloukitTooltipModule } from '../index'; import { DemoComponent } from './demo.component'; @NgModule({ declarations: [ DemoComponent ], exports: [ DemoComponent ], imports: [ CommonModule, CloukitThemeModule, CloukitTooltipModule, CloukitDropoutModule, ], providers: [ ], bootstrap: [ ] }) export class DemoModule {}
2. In your HTML.
<cloukit-dropout-outlet></cloukit-dropout-outlet> <div style="padding:60px;"> <span class="label">tooltip to the left:</span> <span class="tooltipTrigger" cloukitTooltip="delicious german sausage" cloukitTooltipPlacement="left" >Bratwurst</span> <br><br> <span class="label">tooltip to the right:</span> <span class="tooltipTrigger" cloukitTooltip="delicious german sausage" cloukitTooltipPlacement="right" >Bratwurst</span> <br><br> <span class="label">tooltip to the top:</span> <span class="tooltipTrigger" cloukitTooltip="delicious german sausage" cloukitTooltipPlacement="top" >Bratwurst</span> <br><br> <span class="label">tooltip to the bottom:</span> <span class="tooltipTrigger" cloukitTooltip="delicious german sausage" cloukitTooltipPlacement="bottom" >Bratwurst</span> <br><br> <span class="label">tooltip on a button:</span> <button class="tooltipTrigger" cloukitTooltip="delicious german sausage" cloukitTooltipPlacement="bottom" >Bratwurst</button> <br><br> <span class="label">tooltip on a buton with click action:</span> <a href="#" class="tooltipTrigger" cloukitTooltip="delicious german sausage" cloukitTooltipPlacement="bottom" (click)="counter=counter+1" >Bratwurst {{counter}}</a> </div>
3. In your component.ts.
import { Component } from '@angular/core'; @Component({ selector: 'demo', templateUrl: './demo.component.html', styles: [ '.tooltipTrigger { color:#710ECC; cursor: help; }', '.label { display:inline-block; width:250px; }', ], }) export class DemoComponent { counter = 0; }
minimal tooltip component for angular Plugin/Github
See Demo And Download
Official Website(cloukit): Click Here
This superior jQuery/javascript plugin is developed by cloukit. For extra advanced usage, please go to the official website.