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


October 10, 2017
Angular2+ tooltip directive
Plunker Example:


  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';  
       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="" />  

Usage it in your code

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

Note: Special thanks to ng2-ui


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