Tooltips

Usage

Simple: use the title(or data-title) attribute to set the title.

<button class="btn btn-primary"
  nzbTooltip
  #tooltipInstance="nzbTooltip"
  title="Static Title">Tooltip</button>

Fancier: use nzbTooltipTitle with ng-template to interpolate variables

<button class="btn btn-primary"
  nzbTooltip
  #tooltipInstance="nzbTooltip"
  [nzbTooltipTitle]="tooltipTitle">Tooltip</button>
<ng-template #tooltipTitle>
  Shown for {{shownFor}}s
</ng-template>

export class SomeComponent implements AfterViewInit, OnDestroy {
  @ViewChild('tooltipInstance') tooltipInstance: NzbTooltipDirective;
  shownFor: number = 0;
  private sub: Subscription;
  private interval: any;
  ngAfterViewInit() {
    this.sub = this.tooltipInstance.status.subscribe((status: string) => {
      switch(status) {
        case 'show':
          this.shownFor = 0;
          this.interval = setInterval(() =>{
            this.shownFor++;
          }, 1000);
          break;
        case 'hidden':
          if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
          }
          break;
      }
    });
  }
  ngOnDestroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
    this.sub.unsubscribe();
  }
}

Options

You can specify the following Bootstrap tooltip options either in nzbTooltipOptions or as data- attributes:

In addition, you can specify whether or not the tooltip animates to hidden when its target is destroyed:

Methods

The directive wraps the following native Bootstrap tooltip methods:

Properties