JSPM

angular-tippy

0.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 150
  • Score
    100M100P100Q73448F
  • License Apache-2.0

Package Exports

  • angular-tippy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-tippy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Tippy.JS Directive & Service

This is a wrapper around the Tippy.js. Easily create tooltips using a directive or utilize the service

Installation

Install Using NPM

  npm install --save angular-tippy

Adding Module

import { AppComponent } from './app.component';
import { NgTippyModule } from 'ng-tippy';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgTippyModule
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage as a Service

import { NgTippyService, Instance} from 'ng-tippy';

  @Component({
    selector: 'app-test',
    template: `
      <div #element> </div>
    `
  })
  export class TestComponent implements OnInit {
    @ViewChild('element') element: ElementRef;
    private options = {
      content: 'This is a basic popup'
    }
    private tippyInstance: Instance;
    constructor(
      private tippy: NgTippyService;
    ) {

    }

    ngOnInit() {
      this.tippyInstance = this.tippy.init(this.element, this.options);
      this.tippyInstance.show(3000);
    }
  }

Usage as a directive

  const config = {
    content: 'This is a basic Popup'
  }
  <div *ngTippy="config"> 
    
  </div>

API

Check out the full documentation for the configuration at the official documents Tippy.js

License

Apache License Version 2.0, January 2004