Angular 结构指令，位置工具提示

我已经创建了一个structural指令，当我将鼠标悬停在文本“see tooltip”上时，它会根据ng模板中的内容显示工具提示 工具提示显示正确，但它显示在屏幕的顶部：0px左侧：0px位置，我希望它显示在文本“查看工具提示”的正上方，我已使用方法“getBoundingClientRect（）”获得elementRef的尺寸，但我不知道如何在工具提示中应用它们。有什么想法吗

tooltip.directive.ts

import { Component, Input, HostListener,  Directive, ElementRef, 
TemplateRef, ViewContainerRef,  ContentChild, ComponentRef } from 
'@angular/core';

@Directive({ selector: '[tooltipDirective]' })
export class TooltipDirective {
private tooltipId: string;
private dimensiones:{};
constructor(private elementRef: ElementRef,
          private viewContainerRef: ViewContainerRef) { }

@Input() parametroPlantilla: TemplateRef<any>;
@ContentChild( "tooltipTemplate" ) private tooltipTemplateRef: TemplateRef 
 <Object>;
@HostListener('mouseenter')  onMouseEnter(): void {    
this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
this.dimensiones = this.elementRef.nativeElement.getBoundingClientRect();   
}
@HostListener('mouseleave')  onMouseLeave(): void {        
 if (this.viewContainerRef) {
    this.viewContainerRef.clear();
  }  
 }  
}

import{组件，输入，主机侦听器，指令，ElementRef，
TemplateRef、ViewContainerRef、ContentChild、ComponentRef}from
'角/核'；
@指令（{选择器：'[tooltipDirective]'}）
导出类TooltipDirective{
私有工具提示：字符串；
私有维度：{}；
构造函数（私有elementRef:elementRef，
私有viewContainerRef:viewContainerRef{}
@Input（）ParameterPlantilla:TemplateRef；
@ContentChild（“ToolTiptTemplate”）私有ToolTiptTemplateRef:TemplateRef
;
@HostListener（'mouseenter'）onMouseCenter（）：void{
this.viewContainerRef.createEmbeddedView（this.ToolTiptTemplateRef）；
this.dimensions=this.elementRef.nativeElement.getBoundingClientRect（）；
}
@HostListener（'mouseleave'）onMouseLeave（）：void{
if（this.viewContainerRef）{
this.viewContainerRef.clear（）；
}  
}  
}

display.component.ts

...Some stuff

<div tooltipDirective>See tooltip!
  <ng-template #tooltipTemplate >      
      <div>   
          This is my tooltip!
      </div>      
  </ng-template>  
</div>

…一些东西
查看工具提示！
这是我的工具提示！

我将通过将生成的工具提示移动到宿主元素中来实现，这样我将只使用css规则来定义位置：

工具提示.directive.ts

@指令（{选择器：'[tooltipDirective]}）
导出类TooltipDirective{
私有工具提示：字符串；
建造师(
私有渲染器：渲染器2，
private elementRef:elementRef，
私有viewContainerRef:viewContainerRef{}
@Input（）parametroPlantilla:TemplateRef
非常感谢！它成功了！但我不确定这行代码的作用：“view.rootNodes.forEach（node=>this.renderer.appendChild（this.elementRef.nativeElement，node）”您能解释一下吗？默认情况下，您的
是否有人知道在显示工具提示时如何集成动画？您希望应用哪个动画？像fadein和fadeout这样的带有过渡的动画，我不知道如何应用它