diff --git a/components/popover/nz-popover.component.html b/components/popover/nz-popover.component.html
index 2dc6c6b528f..2b7fe0fecbd 100644
--- a/components/popover/nz-popover.component.html
+++ b/components/popover/nz-popover.component.html
@@ -13,12 +13,14 @@
(@fadeAnimation.done)="_afterVisibilityAnimation($event)">
-
-
- {{ nzTitle }}
-
-
-
{{ nzContent }}
+
+
+
+ {{ nzTitle }}
+
+
+ {{ nzContent }}
+
diff --git a/components/popover/nz-popover.component.ts b/components/popover/nz-popover.component.ts
index 4406f85d299..e31e912cde6 100644
--- a/components/popover/nz-popover.component.ts
+++ b/components/popover/nz-popover.component.ts
@@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
import { fadeAnimation } from '../core/animation/fade-animations';
import { isNotNil } from '../core/util';
import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
@@ -19,7 +20,8 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
export class NzPopoverComponent extends NzToolTipComponent {
_prefix = 'ant-popover-placement';
- @Input() @ContentChild('neverUsedTemplate') nzTitle: string | TemplateRef
; // used to remove NzToolTipComponent @ContentChild('nzTemplate')
+ /** Used to remove NzToolTipComponent @ContentChild('nzTemplate') */
+ @Input() @ContentChild('neverUsedTemplate') nzTitle: string | TemplateRef;
@Input() @ContentChild('nzTemplate') nzContent: string | TemplateRef;
constructor(cdr: ChangeDetectorRef) {
diff --git a/components/tooltip/nz-tooltip.component.ts b/components/tooltip/nz-tooltip.component.ts
index 1a10e6ad054..903d02d890e 100644
--- a/components/tooltip/nz-tooltip.component.ts
+++ b/components/tooltip/nz-tooltip.component.ts
@@ -12,6 +12,7 @@ import {
ContentChild,
EventEmitter,
Input,
+ OnChanges,
Output,
TemplateRef,
ViewChild,
@@ -37,7 +38,7 @@ import { toBoolean } from '../core/util/convert';
}
` ]
})
-export class NzToolTipComponent {
+export class NzToolTipComponent implements OnChanges {
_hasBackdrop = false;
_prefix = 'ant-tooltip-placement';
_positions: ConnectionPositionPair[] = [ ...DEFAULT_4_POSITIONS ];
@@ -55,8 +56,6 @@ export class NzToolTipComponent {
@Input() nzMouseEnterDelay = 0.15; // second
@Input() nzMouseLeaveDelay = 0.1; // second
- @Output() readonly nzVisibleChange = new EventEmitter();
-
@Input()
set nzVisible(value: boolean) {
const visible = toBoolean(value);
@@ -66,9 +65,7 @@ export class NzToolTipComponent {
}
}
- get nzVisible(): boolean {
- return this.visibleSource.value;
- }
+ get nzVisible(): boolean { return this.visibleSource.value; }
@Input()
set nzTrigger(value: string) {
@@ -76,9 +73,7 @@ export class NzToolTipComponent {
this._hasBackdrop = this._trigger === 'click';
}
- get nzTrigger(): string {
- return this._trigger;
- }
+ get nzTrigger(): string { return this._trigger; }
@Input()
set nzPlacement(value: string) {
@@ -88,8 +83,16 @@ export class NzToolTipComponent {
}
}
- get nzPlacement(): string {
- return this._placement;
+ get nzPlacement(): string { return this._placement; }
+
+ @Output() readonly nzVisibleChange = new EventEmitter();
+
+ constructor(public cdr: ChangeDetectorRef) {}
+
+ ngOnChanges() {
+ Promise.resolve().then(() => {
+ this.updatePosition();
+ });
}
// Manually force updating current overlay's position
@@ -107,8 +110,7 @@ export class NzToolTipComponent {
}
}
this.setClassMap();
- /** TODO may cause performance problem */
- this.cdr.detectChanges();
+ this.cdr.detectChanges(); // TODO: performance?
}
show(): void {
@@ -141,8 +143,6 @@ export class NzToolTipComponent {
this.overlayOrigin = origin;
}
- constructor(public cdr: ChangeDetectorRef) {}
-
protected isContentEmpty(): boolean {
return this.nzTitle instanceof TemplateRef ? false : (this.nzTitle === '' || !isNotNil(this.nzTitle));
}
diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts
index dac9be98723..5bae17eecda 100644
--- a/components/tooltip/nz-tooltip.directive.ts
+++ b/components/tooltip/nz-tooltip.directive.ts
@@ -24,7 +24,7 @@ import { NzToolTipComponent } from './nz-tooltip.component';
@Directive({
selector: '[nz-tooltip]',
- host: {
+ host : {
'[class.ant-tooltip-open]': 'isTooltipOpen'
}
})
@@ -165,6 +165,11 @@ export class NzTooltipDirective implements AfterViewInit, OnChanges, OnInit, OnD
this.updateCompValue(key, change.currentValue);
}
});
+
+ if (changes.setTitle) {
+ this.nzTitle = changes.setTitle.currentValue;
+ this.updateCompValue('nzTitle', changes.setTitle.currentValue);
+ }
}
}
}
diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts
index 21ee3632683..9da3b3f3002 100644
--- a/components/tooltip/nz-tooltip.spec.ts
+++ b/components/tooltip/nz-tooltip.spec.ts
@@ -239,6 +239,16 @@ describe('NzTooltip', () => {
expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
}));
+ it('should set `setTitle` proxy to `nzTitle`', () => {
+ fixture.detectChanges();
+ const tooltipComponent = (component.titleStringNzTooltipDirective as any).tooltip as NzToolTipComponent; // tslint:disable-line:no-any
+ expect(tooltipComponent.nzTitle).toBe('title-string');
+
+ component.title = 'changed!';
+ fixture.detectChanges();
+ expect(tooltipComponent.nzTitle).toBe('changed!');
+ });
+
});
});
@@ -246,7 +256,7 @@ describe('NzTooltip', () => {
@Component({
selector: 'nz-tooltip-test-new',
template: `
- Show
Show
@@ -266,6 +276,8 @@ export class NzTooltipTestNewComponent {
@ViewChild('titleTemplate', { read: NzTooltipDirective }) titleTemplateNzTooltipDirective: NzTooltipDirective;
@ViewChild('inBtnGroup') inBtnGroup: ElementRef;
+ title = 'title-string';
+
}
@Component({