结构指令,位置工具提示
Structural directives, position tooltip
我创建了一个结构指令,当我将鼠标悬停在文本上时,它会根据 ng-template 中的内容显示工具提示 "see tooltip"
工具提示显示正确,但显示在屏幕的顶部:0px 左侧:0px 位置,我希望它显示在文本 "see tooltip" 的正上方,我已经使用方法实现了 elementRef 的尺寸"getBoundingClientRect()" 但我不知道如何在工具提示中应用它们。有什么想法吗?
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>
我将通过在宿主元素内移动生成的工具提示来实现它,因此我将仅使用 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);
}
我创建了一个结构指令,当我将鼠标悬停在文本上时,它会根据 ng-template 中的内容显示工具提示 "see tooltip" 工具提示显示正确,但显示在屏幕的顶部:0px 左侧:0px 位置,我希望它显示在文本 "see tooltip" 的正上方,我已经使用方法实现了 elementRef 的尺寸"getBoundingClientRect()" 但我不知道如何在工具提示中应用它们。有什么想法吗?
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>
我将通过在宿主元素内移动生成的工具提示来实现它,因此我将仅使用 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);
}