feat(module:tooltip): support usage like: <a nz-tooltip="This is a pr…

src/components/popconfirm/nz-popconfirm.component.ts

@@ -4,11 +4,8 @@ import {
   Input,
   Output,
   EventEmitter,
-  ContentChild,
-  Renderer2,
   ChangeDetectorRef,
 } from '@angular/core';
-import { NzPopconfirmDirective } from './nz-popconfirm.directive';
 import { FadeAnimation } from '../core/animation/fade-animations';
 import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
 import { NzLocaleService } from '../locale/index';
@@ -23,7 +20,7 @@ import { NzLocaleService } from '../locale/index';
     <ng-content></ng-content>
     <ng-template
       cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="nzOrigin"
+      [cdkConnectedOverlayOrigin]="overlayOrigin"
       [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
       (backdropClick)="hide()"
       (detach)="hide()"
@@ -80,10 +77,9 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
 
   @Output() nzOnCancel: EventEmitter<any> = new EventEmitter();
   @Output() nzOnConfirm: EventEmitter<any> = new EventEmitter();
-  @ContentChild(NzPopconfirmDirective) nzOrigin;
 
-  constructor(renderer: Renderer2, cdr: ChangeDetectorRef, private _locale: NzLocaleService) {
-    super(renderer, cdr);
+  constructor(cdr: ChangeDetectorRef, private _locale: NzLocaleService) {
+    super(cdr);
   }
 
   show(): void {

src/components/popconfirm/nz-popconfirm.directive.ts

@@ -1,8 +1,23 @@
-import { Directive, ElementRef } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  Renderer2
+} from '@angular/core';
+import { NzPopconfirmComponent } from './nz-popconfirm.component';
+import { NzTooltipDirective } from '../tooltip/nz-tooltip.directive';
+
 @Directive({
   selector: '[nz-popconfirm]',
 })
-export class NzPopconfirmDirective {
-  constructor(public elementRef: ElementRef) {
+export class NzPopconfirmDirective extends NzTooltipDirective {
+  constructor(
+      elementRef: ElementRef,
+      hostView: ViewContainerRef,
+      resolver: ComponentFactoryResolver,
+      renderer: Renderer2,
+      tooltip: NzPopconfirmComponent) {
+    super(elementRef, hostView, resolver, renderer, tooltip);
   }
 }

src/components/popover/nz-popover.component.ts

@@ -1,10 +1,8 @@
 import {
   Component,
   ViewEncapsulation,
-  Input,
-  ContentChild
+  Input
 } from '@angular/core';
-import { NzPopoverDirective } from './nz-popover.directive';
 import { FadeAnimation } from '../core/animation/fade-animations';
 import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
 @Component({
@@ -17,7 +15,7 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
     <ng-content></ng-content>
     <ng-template
       cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="nzOrigin"
+      [cdkConnectedOverlayOrigin]="overlayOrigin"
       [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
       (backdropClick)="hide()"
       (detach)="hide()"
@@ -49,5 +47,4 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
 export class NzPopoverComponent extends NzToolTipComponent {
   _prefix = 'ant-popover-placement';
   @Input() nzContent;
-  @ContentChild(NzPopoverDirective) nzOrigin;
 }

src/components/popover/nz-popover.directive.ts

@@ -1,8 +1,23 @@
-import { Directive, ElementRef } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  Renderer2
+} from '@angular/core';
+import { NzPopoverComponent } from './nz-popover.component';
+import { NzTooltipDirective } from '../tooltip/nz-tooltip.directive';
+
 @Directive({
   selector: '[nz-popover]',
 })
-export class NzPopoverDirective {
-  constructor(public elementRef: ElementRef) {
+export class NzPopoverDirective extends NzTooltipDirective {
+  constructor(
+      elementRef: ElementRef,
+      hostView: ViewContainerRef,
+      resolver: ComponentFactoryResolver,
+      renderer: Renderer2,
+      tooltip: NzPopoverComponent) {
+    super(elementRef, hostView, resolver, renderer, tooltip);
   }
 }

src/components/tooltip/nz-tooltip.component.ts

@@ -4,7 +4,6 @@ import {
   Input,
   TemplateRef,
   Output,
-  Renderer2,
   EventEmitter,
   AfterViewInit,
   ChangeDetectorRef,
@@ -13,12 +12,12 @@ import {
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
-import { NzTooltipDirective } from './nz-tooltip.directive';
 import {
   AnimationEvent,
 } from '@angular/animations';
 import { FadeAnimation } from '../core/animation/fade-animations';
 import {
+  OverlayOrigin,
   ConnectionPositionPair,
   ConnectedOverlayDirective
 } from '@angular/cdk/overlay';
@@ -35,7 +34,7 @@ import { POSITION_MAP, DEFAULT_4_POSITIONS } from '../core/overlay/overlay-posit
     <ng-template
       #overlay="cdkConnectedOverlay"
       cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="nzOrigin"
+      [cdkConnectedOverlayOrigin]="overlayOrigin"
       [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
       (backdropClick)="hide()"
       (detach)="hide()"
@@ -61,15 +60,16 @@ import { POSITION_MAP, DEFAULT_4_POSITIONS } from '../core/overlay/overlay-posit
     './style/patch.less'
   ]
 })
-export class NzToolTipComponent implements AfterViewInit {
+export class NzToolTipComponent {
   @Input() nzTitle: string;
   @Input() nzOverlayClassName = '';
   @Input() nzOverlayStyle = {};
   @Output() nzVisibleChange: EventEmitter<any> = new EventEmitter();
-  @ContentChild(NzTooltipDirective) nzOrigin;
   @ContentChild('nzTemplate') nzTemplate: TemplateRef<any>;
   @ViewChild('overlay') overlay: ConnectedOverlayDirective;
 
+  protected overlayOrigin: OverlayOrigin;
+
   @Input()
   set nzVisible(value) {
     if (this.visibleSource.value !== value) {
@@ -90,7 +90,6 @@ export class NzToolTipComponent implements AfterViewInit {
     this._trigger = value;
     this._hasBackdrop = this._trigger === 'click';
   }
-
   get nzTrigger() {
     return this._trigger;
   }
@@ -135,12 +134,10 @@ export class NzToolTipComponent implements AfterViewInit {
 
   show(): void {
     this.nzVisible = true;
-    this.nzOrigin.isTooltipOpen = true;
   }
 
   hide(): void {
     this.nzVisible = false;
-    this.nzOrigin.isTooltipOpen = false;
   }
 
   _afterVisibilityAnimation(e: AnimationEvent): void {
@@ -159,22 +156,9 @@ export class NzToolTipComponent implements AfterViewInit {
     };
   }
 
-  constructor(private _renderer: Renderer2, private _cdr: ChangeDetectorRef) {
+  setOverlayOrigin(origin: OverlayOrigin) {
+    this.overlayOrigin = origin;
   }
 
-  ngAfterViewInit() {
-    if (this._trigger === 'hover') {
-      this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'mouseenter', () => this.show());
-      this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'mouseleave', () => this.hide());
-    } else if (this._trigger === 'focus') {
-      this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'focus', () => this.show());
-      this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'blur', () => this.hide());
-    } else if (this._trigger === 'click') {
-      this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'click', (e) => {
-        e.preventDefault();
-        this.show()
-      });
-    }
-
-  }
+  constructor(private _cdr: ChangeDetectorRef) { }
 }

src/components/tooltip/nz-tooltip.directive.ts

@@ -1,11 +1,76 @@
-import { Directive, ElementRef, HostBinding } from '@angular/core';
+import {
+  Directive,
+  Input,
+  SimpleChanges,
+  AfterViewInit,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  ElementRef,
+  HostBinding,
+  Optional,
+  Renderer2
+} from '@angular/core';
+import { NzToolTipComponent } from './nz-tooltip.component';
 
 @Directive({
   selector: '[nz-tooltip]',
 })
-export class NzTooltipDirective {
+export class NzTooltipDirective implements AfterViewInit {
+  // [NOTE] Here hard coded, and nzTitle used only under NzTooltipDirective currently.
+  // The inherited class such as NzPopconfirmDirective should override this property if want using this property.
+  @Input('nz-tooltip')
+  get nzTitle() {
+    return this.tooltip.nzTitle;
+  }
+  set nzTitle(title: string) {
+    if (this.isDynamicTooltip) {
+      this.tooltip.nzTitle = title;
+    }
+  }
+
   @HostBinding('class.ant-tooltip-open') isTooltipOpen;
 
-  constructor(public elementRef: ElementRef) {
+  private tooltip: NzToolTipComponent;
+  private isDynamicTooltip = false; // Indicate whether current tooltip is dynamic created
+
+  constructor(
+      public elementRef: ElementRef,
+      private hostView: ViewContainerRef,
+      private resolver: ComponentFactoryResolver,
+      private renderer: Renderer2,
+      @Optional() tooltip: NzToolTipComponent) {
+    // Support faster tooltip mode: <a nz-tooltip="xxx"></a>. [NOTE] Used only under NzTooltipDirective currently.
+    if (!tooltip) {
+      const factory = this.resolver.resolveComponentFactory(NzToolTipComponent);
+      tooltip = this.hostView.createComponent(factory).instance;
+      this.isDynamicTooltip = true;
+    }
+    tooltip.setOverlayOrigin(this);
+    this.tooltip = tooltip;
+  }
+
+  ngAfterViewInit() {
+    if (this.tooltip.nzTrigger === 'hover') {
+      this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.show());
+      this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', () => this.hide());
+    } else if (this.tooltip.nzTrigger === 'focus') {
+      this.renderer.listen(this.elementRef.nativeElement, 'focus', () => this.show());
+      this.renderer.listen(this.elementRef.nativeElement, 'blur', () => this.hide());
+    } else if (this.tooltip.nzTrigger === 'click') {
+      this.renderer.listen(this.elementRef.nativeElement, 'click', (e) => {
+        e.preventDefault();
+        this.show()
+      });
+    }
+  }
+
+  private show() {
+    this.tooltip.show();
+    this.isTooltipOpen = true;
+  }
+
+  private hide() {
+    this.tooltip.hide();
+    this.isTooltipOpen = false;
   }
 }

src/showcase/nz-demo-tooltip/nz-demo-tooltip-basic.component.ts

@@ -5,6 +5,8 @@ import { Component, OnInit } from '@angular/core';
     <nz-tooltip [nzTitle]="'prompt text'">
       <span nz-tooltip>Tooltip will show when mouse enter.</span>
     </nz-tooltip>
+    <br>
+    <a nz-tooltip="Most simple prompt text" href="#">Most simple way to trigger a tooltip!</a>
   `,
   styles  : []
 })