我创建了一个结构指令,该指令根据 ng 模板中的内容显示工具提示,当我将鼠标悬停在“查看工具提示”文本上时,工具提示会正确显示,但它显示在顶部:0px 左侧:0px 位置屏幕上,我希望它显示在文本“查看工具提示”的上方,我已经使用“getBoundingClientRect()”方法实现了 elementRef 的尺寸,但我不知道如何在工具提示中应用它们。任何想法?
工具提示.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();
}
}
}
display.component.ts
...Some stuff
<div tooltipDirective>See tooltip!
<ng-template #tooltipTemplate >
<div>
This is my tooltip!
</div>
</ng-template>
</div>