Author: | cloukit |
---|---|
Official Page: | Go to website |
Publish Date: | November 26, 2017 |
License: | MIT |
Description:
A simple, unobtrusive tooltip component created for Angular 4+ app.
Installation:
# NPM $ npm install @cloukit/tooltip --save
Usage:
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 {}
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>
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; }