Showing posts with label ng2-ui-tooltip. Show all posts
Showing posts with label ng2-ui-tooltip. Show all posts
ng2-ui-tooltip

ng2-ui-tooltip

October 10, 2017
Angular2+ tooltip directive
Plunker Example: https://plnkr.co/edit/6reiaH?p=preview

Install

  1. install @ngitooltip
     $ npm install @ngui/tooltip --save  
    
  2. add map and packages to your systemjs.config.js
     map['@ngui/tooltip'] = 'node_modules/@ngui/tooltip/dist/tooltip.umd.js';  
    
  3. import NguiTooltipOverlay to your AppModule
  4.  import { NgModule } from '@angular/core';  
      import { FormsModule } from "@angular/forms";  
      import { BrowserModule } from '@angular/platform-browser';  
      import { AppComponent } from './app.component';  
      import { NguiTooltipModule } from '@ngui/tooltip';  
      @NgModule({  
       imports: [BrowserModule, FormsModule, NguiTooltipModule],  
       declarations: [AppComponent],  
       bootstrap: [ AppComponent ]  
      })  
      export class AppModule { }  
    
For full example, please check out test directory to see the example of
  • systemjs.config.js
  • app.module.ts
  • and app.component.ts
add ngui-tooltip.css into your html  
 <link rel="stylesheet" href="https://unpkg.com/ngui-tooltip-overlay/dist/ngui-tooltip.css" />  

Usage it in your code

 <div tooltip="This is my tooltip">  
   Move mouse over here to see the tooltip  
  </div>  


Note: Special thanks to ng2-ui

Contact: allenhwkim@gmail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.