Tooltip examples for nowzoo-angular-bootstrap-lite

tooltip-demo-0.html

<button class="btn btn-primary"
  nzbTooltip
  [nzbTooltipTitle]="quickstartTitle"
  data-placement="auto">Quick Example (Hover)</button>
  <ng-template #quickstartTitle>Tooltip Title</ng-template>

tooltip-demo-add-class.component.ts

import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
declare const jQuery: any;

import { NzbTooltipDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-tooltip-demo-add-class',
  template: `
  <p>
    <button class="btn btn-primary"
      nzbTooltip
      #tooltipInstance="nzbTooltip"
      [nzbTooltipTitle]="tooltipContent"
      data-placement="auto">
      Tooltip Demo (Hover)
    </button>
    <ng-template #tooltipContent>
      This tooltip
      <strong *ngIf="!dangerClassOn">does not have</strong>
      <strong *ngIf="dangerClassOn">has</strong>
      the extra .danger class.
    </ng-template>

  </p>
  <p>
    <button class="btn btn-secondary btn-sm" (click)="toggle()">
      Toggle Class
    </button>
    <strong>On:</strong> {{dangerClassOn | json}}
  </p>
  `
})
export class TooltipDemoAddClassComponent implements AfterViewInit, OnDestroy {
  @ViewChild('tooltipInstance') tooltipInstance: NzbTooltipDirective;

  dangerClassOn: boolean = true;

  private sub: Subscription;

  toggle() {
    // check to see that tip exists (it does not if the popover has not yet been opened)...
    let tip = this.tooltipInstance.boostrapComponentData.tip || null;
    this.dangerClassOn  = ! this.dangerClassOn;
    if (tip) {
      jQuery(tip).toggleClass('danger', this.dangerClassOn);
    }

  }
  ngAfterViewInit() {
    // make sure we toggle the class at least once...
    this.sub = this.tooltipInstance.events
      .filter((event:Event) => 'inserted' === event.type)
      .subscribe(() => {
        jQuery(this.tooltipInstance.boostrapComponentData.tip)
          .toggleClass('danger', this.dangerClassOn);
      })
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

tooltip-demo-attributes.html

<button class="btn btn-primary"
  nzbTooltip
  title="Static tooltip title"
  data-placement="auto">
  Demo Tooltip (Hover)
</button>

tooltip-demo-disable.html

<button class="btn btn-primary"
  nzbTooltip
  #tooltipInstance="nzbTooltip"
  title="Enable/Disable Demo"
  data-placement="auto">
  Tooltip Demo (Hover)
  <span *ngIf="tooltipInstance.enabled"> - Enabled</span>
  <span *ngIf="!tooltipInstance.enabled"> - Disabled</span>
</button>

<button class="btn btn-secondary btn-sm"
  [disabled]="tooltipInstance.enabled"
  (click)="tooltipInstance.enable()">enable()</button>
<button class="btn btn-secondary btn-sm"
  [disabled]="!tooltipInstance.enabled"
  (click)="tooltipInstance.disable()">disable()</button>
<button class="btn btn-secondary btn-sm"
  (click)="tooltipInstance.toggleEnabled()">toggleEnabled()</button>

tooltip-demo-goes-away.component.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { NzbTooltipDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-tooltip-demo-hide-on-route-change',
  template: `<p>
  <button class="btn btn-primary"
    nzbTooltip
    #tooltipInstance="nzbTooltip"
    title="Tooltip goes away nicely">
    Tooltip Demo</button>
  </p>
  `
})
export class TooltipDemoHideOnRouteChangeComponent implements AfterViewInit {
  @ViewChild('tooltipInstance') tooltipInstance: NzbTooltipDirective;
  ngAfterViewInit() {
    setTimeout(() => {
        this.tooltipInstance.show();
    })
  }
}

tooltip-demo-instance.component.ts

import { Component, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbTooltipDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
  selector: 'app-tooltip-demo-get-instance',
  template: `
    <p>
      <button class="btn btn-primary"
        nzbTooltip
        #tooltipInstance="nzbTooltip"
        title="Tooltip Instance Demo"
        data-placement="auto">
        Tooltip Demo (Hover)
      </button>
    </p>
    <p>
      <strong>Status:</strong> {{tooltipInstance.status | async | json}}
    </p>

    <p><strong>Last 5 Events (Newest First):</strong></p>
    <ol>
      <li *ngFor="let e of last5Events">{{e.type}}.{{e.namespace}} at {{e.timeStamp | amDateFormat: 'H:mm:ss.SSSS'}}</li>
    </ol>
  `
})
export class TooltipDemoGetInstanceComponent implements AfterViewInit, OnDestroy {
  @ViewChild('tooltipInstance') tooltipInstance: NzbTooltipDirective;
  private sub: Subscription;
  last5Events: Event[] = []

  ngAfterViewInit() {
    this.sub = this.tooltipInstance.events.subscribe((boostrapEvent: Event) => {
      this.last5Events.unshift(boostrapEvent);
      this.last5Events = this.last5Events.slice(0, 5)
    })
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

tooltip-demo-manual.html

<button class="btn btn-primary"
  nzbTooltip
  #tooltipInstance="nzbTooltip"
  title="Show/Hide/Toggle Example"
  data-placement="top"
  data-trigger="manual">
  Tooltip Demo (Manual)
</button>

<button class="btn btn-secondary btn-sm" 
  [disabled]="tooltipInstance.shown"
  (click)="tooltipInstance.show()">show()</button>
  
<button class="btn btn-secondary btn-sm"
  [disabled]="tooltipInstance.hidden"
  (click)="tooltipInstance.hide()">hide()</button>
  
<button class="btn btn-secondary btn-sm"
  (click)="tooltipInstance.toggle()">toggle()</button>

tooltip-demo-placement.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-placement-func',
  template: `<p>
  <button class="btn btn-primary"
    nzbTooltip
    [nzbTooltipPlacement]="getPlacement"
    title="This tooltip was placed by a function.">
    Tooltip Demo (Hover)</button>
  </p>
  `
})
export class TooltipDemoPlacementFuncComponent  {
  getPlacement(tooltipEl, targetEl){
    // do some fancy calculation here based on the small breakpoint...
    if (window.innerWidth < 576){
      return 'top';
    } else {
      return 'left';
    }
  }
}

tooltip-demo-templates.component.ts

import { Component, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-templates',
  template: `
  <!-- templates example -->
  <p>
    <button class="btn btn-primary"
      nzbTooltip
      [nzbTooltipTitle]="titleTemplate"
      data-placement="auto"
      #tooltipInstance="nzbTooltip">Demo Tooltip (Hover)</button>
  </p>
  <ng-template #titleTemplate >
    <i class="fa fa-clock-o fa-spin"></i>
    This popover has been open for
    {{seconds}} second<span *ngIf="seconds!==1">s</span>!
  </ng-template>
  `
})
export class TooltipDemoTemplatesComponent implements AfterViewInit, OnDestroy {
  @ViewChild('tooltipInstance') tooltipInstance: any;
  interval: any = null;
  seconds: number = 0;
  constructor() { }

  ngAfterViewInit() {
    this.tooltipInstance.events.subscribe((nativeBsEvent: Event) => {
      switch(nativeBsEvent.type){
        case 'show':
          this.seconds = 0;
          this.interval = setInterval(() => {
            this.seconds++;
          }, 1000);
          break;
        case 'hidden':
          clearInterval(this.interval);
          this.interval = null;
          break;
      }
    })
  }

  ngOnDestroy() {
    if (this.interval){
      clearInterval(this.interval);
    }
  }
}