Angular 8+ wrapper forTippy.js

Demo

Installation

npmingx-tippy-wrapper--save

Importing

import{NgxTippyModule}from'ngx-tippy-wrapper';

@NgModule({imports:[        ...,NgxTippyModule],    ...})

@import'tippy.js/dist/tippy.css';

"architect":{"build":{  ...,"options":{    ...,"styles":[...,"./node_modules/tippy.js/dist/tippy.css"]}

Using

Basic usage

<buttonngxTippydata-tippy-content="Tooltip content">  Element with tooltip</button>

Applying props

<buttonngxTippydata-tippy-content="Tooltip content"class="t-demo__btn"[tippyProps]="{    arrow: false,    placement: 'bottom'  }">  Element with tooltip</button>

<spanngxTippydata-tippy-content="Tooltip content"[tippyProps]="tippyProps">  Element with tooltip</span>

...import{NgxTippyProps}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsOnInit{tippyProps:NgxTippyProps={trigger:'click',allowHTML:true,};  ...}

Implemented props

Applying content

You can pass content for tooltip through:

<buttonngxTippydata-tippy-content="Tooltip content">  Element with tooltip</button>

...import{NgxTippyProps}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsOnInit{bindedContent:string='Binded tooltip content';  ...}

<buttonngxTippy[tippyProps]="{    allowHTML: true,    content: '<p>Tooltip <strong>HTML</strong> content</p>'  }">  Element with tooltip</button>

<buttonngxTippytippyName="content">  Element with tooltip</button>

...import{NgxTippyService}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsOnInit,AfterViewInit{bindedContent:string='Binded tooltip content';constructor(privatetippyService:NgxTippyService){}  ...ngAfterViewInit(){this.setContentForTooltip();}setContentForTooltip(){this.tippyService.setContent('content',this.bindedContent);}}

<buttonngxTippy[tippyProps]="tippyProps">  Element with tooltip</button>

...@Component({ ...})exportclassDemoComponentimplementsOnInit{tippyProps:NgxTippyProps={ ...}  ...ngOnInit(){this.setContentForTooltip();}setContentForTooltip(){this.tippyProps.content='Initial tooltip content'}}

<button[ngxTippy]="tippyTemplate"tippyName="content"[tippyProps]="tippyContent">  Element with tooltip</button><div#tippyTemplate><h4>Caption</h4><p>Some content</p><button(click)="...">Action</button>  ...</div>

<div><buttonngxTippytippyName="content"[tippyProps]="tippyProps">    Element with tooltip</button><!-- If passing element itself --><div#tippyTemplate><h4>Caption</h4><p>Some content</p><button(click)="...">Action</button>    ...</div><!-- If passing element innerHTML --><div#tippyTemplatestyle="display: none;"><h4>Caption</h4><p>Some content</p>    ...</div></div>

...import{NgxTippyProps}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsAfterViewInit{  @ViewChild('tippyTemplate',{read:ElementRef,static:false})tippyTemplate:ElementRef;tippyContent:NgxTippyProps={ ...};constructor(privatengxTippyService:NgxTippyService){}ngAfterViewInit(){this.setContentForTooltip();}setContentForTooltip(){consttemplate=this.tippyTemplate.nativeElement;// Pass element itselfthis.ngxTippyService.setContent('content',template);// or// Pass element innerHTMLthis.ngxTippyService.setContent('content',template.innerHTML);}  ...}

Methods

...import{NgxTippyService}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsOnInit{constructor(privatetippyService:NgxTippyService){}  ...}

Implemented methods

Available subscription to changes of tippy instances

{  name:string;  reason:InstanceChangeReason;  instance:NgxTippyInstance;}typeInstanceChangeReason=|'setInstance'|'show'|'hide'|'hideWithInteractivity'|'disable'|'enable'|'setProps'|'setContent'|'setTriggerTarget'|'unmount'|'clearDelayTimeouts'|'destroy';

...import{Subscription}from'rxjs';import{NgxTippyService}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsOnInit,OnDestroy{privateinstancesChanges$:Subscription;constructor(privatetippyService:NgxTippyService){}ngOnInit(){this.subToInstancesChanges();}ngOnDestroy(){this.instancesChanges$&&this.instancesChanges$.unsubscribe();}subToInstancesChanges(){this.instancesChanges$=this.ngxTippyService.instancesChanges.subscribe((changes:InstancesChanges)=>{ ...});}  ...}

Grouped tooltips

<ngx-tippy-group[tippyProps]="tippyProps"><buttondata-groupeddata-tippy-content="Tooltip content">Element with tooltip</button><buttondata-groupeddata-tippy-content="Tooltip content">Element with tooltip</button></ngx-tippy-group>

<ngx-tippy-group[tippyProps]="tippyProps"><buttondata-grouped[attr.data-tippy-content]="bindedContent">    Element with tooltip</button><buttondata-grouped[attr.data-tippy-content]="bindedHTMLContent"data-tippy-allowHTML="true">    Element with tooltip</button><buttondata-groupeddata-tippy-content="Tooltip content"data-tippy-arrow="false">    Element with tooltip</button></ngx-tippy-group>

...import{NgxTippyProps}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsOnInit{bindedContent:string='Binded tooltip content';bindedHTMLContent:string='<p>Binded <strong>HTML</strong> content</p>';tippyProps:NgxTippyProps={ ...};  ...}

Multiple tooltips on a single element

<divngxTippydata-tippy-content="First tooltip content"[tippyProps]="{ ... }"><divngxTippydata-tippy-content="Second tooltip content"[tippyProps]="{ ... }"><buttonclass="t-demo__btn"ngxTippydata-tippy-content="Third tooltip content"[tippyProps]="{ ... }">      Element with tooltips</button></div></div>

Singleton

<ngx-tippy-singleton[tippyProps]="{ ... }"><buttondata-singletondata-tippy-content="First tooltip content">    Element with tooltip</button><buttondata-singletondata-tippy-content="First tooltip content">    Element with tooltip</button></ngx-tippy-singleton>

<ngx-tippy-singleton[tippyProps]="{ ... }"><buttondata-singletondata-tippy-content="First tooltip content"data-tippy-placement="bottom">    Element with tooltip</button><buttondata-singletondata-tippy-content="First tooltip content"data-tippy-arrow="false">    Element with tooltip</button></ngx-tippy-singleton>

...import{NgxSingletonProps}from'ngx-tippy-wrapper';@Component({ ...})exportclassDemoComponentimplementsOnInit{tippyProps:NgxSingletonProps={    ...,overrides:['arrow','placement'],};  ...}