自定义Angular2工具提示的位置

Question

我制作了一个自定义TooltipDirective，在this指南后悬停时向TooltipService添加工具提示。工具提示ContainerComponent为TooltipService中的每个工具提示显示TooltipComponent，并将TooltipComponent传递给指令的ElementRef。我的挑战是定位TooltipComponent - 现在正在正确创建组件，但从未显示TooltipComponent。

TooltipComponent目前看起来像：

@Component({
    selector: 'unit-info-tooltip',
    templateUrl: 'Template.html',
    styles: [`
            .tooltip {
                z-index: 100;
                padding: 2px;
                border: 1px solid #DDD;
                color: #333;
                background-color: #FFF;
                position: absolute;
            }
            `]
})
export class UnitInfoTooltipComponent {

    @Input() title: string;
    @Input() ref: any;

    constructor(private elementRef: ElementRef) {
    }
}

及其模板：

<div class="tooltip" [style.top.px]="ref.nativeElement.getBoundingClientRect().top" [style.left.px]="ref.nativeElement.getBoundingClientRect().left">
    <h3>Info</h3>
    <p>Title: {{title}}</p>
</div>

TooltipDirective：

@Directive({
    selector: '[custom-tooltip]',
})
export class CustomTooltipDirective implements OnDestroy {

    @Input() tooltipTitle: string = '';
    private id: number;

    constructor(
        private tooltipService: TooltipService,
        private element: ElementRef
    ) { }

    @HostListener('mouseenter')
    onMouseEnter(): void {
        // Show tooltip
        this.id = Math.random();
        let newComponent = {
            id: this.id,
            ref: this.element,
            title: this.tooltipTitle
        };
        this.tooltipService.components.push(newComponent);
    }

    @HostListener('mouseleave')
    onMouseLeave(): void {
        // Hide tooltip
        this.destroy();
    }

    ngOnDestroy(): void {
        // Hide tooltip
        this.destroy();
    }

    destroy(): void {
        const idx = this.tooltipService.components.findIndex((t) => {
            return t.id === this.id;
        });

        this.tooltipService.components.splice(idx, 1);
    }
}

我不确定为什么TooltipComponent没有显示在[style.top.px]，[style.left.px]属性指定的位置。