问题
I have created a structural directive that displays a tooltip based on what is inside an ng-template, when I hover over the text "see tooltip" the tooltip is displayed correctly, but it is displayed in the top: 0px left: 0px position of the screen, I want it to be displayed just above the text "see tooltip", I have achieved the dimensions of the elementRef with the method "getBoundingClientRect()" but I do not know how to apply them in the tooltip. Any idea?
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:
I would achieve it by moving generated tooltip inside host element so i would use only css rules to define position:
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);
}
Stackblitz example
来源:https://stackoverflow.com/questions/46867548/structural-directives-position-tooltip