结构指令，位置工具提示
结构指令，位置工具提示
提问于 2017-10-22 04:03:50
我已经创建了一个结构化的指令，它显示一个工具提示基于什么是一个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();
}
}
}display.component.ts
...Some stuff
<div tooltipDirective>See tooltip!
<ng-template #tooltipTemplate >
<div>
This is my tooltip!
</div>
</ng-template>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-22 16:45:15
我将通过在host元素中移动生成的工具提示来实现它，这样我就只使用css规则来定义位置：
tooltip.directive.ts
@Directive({ selector: '[tooltipDirective]' })
export class TooltipDirective {
private tooltipId: string;
constructor(
private renderer: Renderer2,
private elementRef: ElementRef,
private viewContainerRef: ViewContainerRef) { }
@Input() parametroPlantilla: TemplateRef<any>;
@ContentChild( "tooltipTemplate" ) private tooltipTemplateRef: TemplateRef<Object>;
@HostListener('mouseenter') onMouseEnter(): void {
const view = this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
view.rootNodes.forEach(node =>
this.renderer.appendChild(this.elementRef.nativeElement, node));
}
@HostListener('mouseleave') onMouseLeave(): void {
if (this.viewContainerRef) {
this.viewContainerRef.clear();
}
}
}html
<div tooltipDirective>See tooltip!
<ng-template #tooltipTemplate>
<div class="tooltip"> <================ add class
This is my tooltip!
</div>
</ng-template>
</div>css
[tooltipDirective] {
position: relative;
}
.tooltip {
position: absolute;
bottom: 100%;
left: 0;
padding: 10px;
background: #fff;
box-shadow: 0 2px 1px rgba(0,0,0,.6);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46867548
复制相关文章
相似问题
腾讯云开发者
