Select Git revision
command.util.spec.ts
tooltip.directive.ts NaN GiB
import { ComponentRef, Directive, ElementRef, HostListener, Injector, Input, OnDestroy, ViewContainerRef } from '@angular/core';
import { TooltipComponent } from './tooltip.component';
@Directive({
selector: '[tooltip]',
})
export class TooltipDirective implements OnDestroy {
@Input() tooltip: string = '';
private componentRef: ComponentRef<TooltipComponent> = null;
constructor(
private elementRef: ElementRef<HTMLElement>,
private injector: Injector,
private viewContainerRef: ViewContainerRef,
) {}
ngOnDestroy(): void {
this.destroy();
}
@HostListener('mouseenter')
onMouseEnter(): void {
if (this.componentRef === null) {
this.componentRef = this.viewContainerRef.createComponent(TooltipComponent, {
injector: this.injector,
});
this.viewContainerRef.insert(this.componentRef.hostView);
this.setTooltipProperties();
}
}
@HostListener('mouseleave')
@HostListener('window:scroll')
destroyTooltip(): void {
this.destroy();
}
private setTooltipProperties() {
if (this.componentRef !== null) {
const { left, right, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
this.componentRef.instance.left = (right + left) / 2;
this.componentRef.instance.top = bottom;
this.componentRef.instance.tooltip = this.tooltip;
}
}
private destroy(): void {
if (this.componentRef !== null) {
this.componentRef.destroy();
this.componentRef = null;
}
}
}