unicorn-components/src/components/utils/tooltip/tooltip.directive.ts

<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>

import { AfterViewInit, ComponentRef, Directive, ElementRef, HostListener, Input } from '@angular/core';

import { TooltipService } from './tooltip.service';
import { UniTooltipComponent } from './tooltip.component';

@Directive({
    selector: '[uniTooltip]',
})
export class UniTooltipDirective implements AfterViewInit {
    private tooltipRef: ComponentRef<UniTooltipComponent> = null;
    private element: any = null;

    @Input() uniTooltip = '';
    @Input() orientation: 'right' | 'top' | 'bottom' | 'left' = 'right';

    @HostListener('mouseover') onMouseover() { this.openTooltip(); }
    @HostListener('mouseout') onMouseout() { this.closeTooltip(); }


    constructor(
        private elementRef: ElementRef,
        private tooltipService: TooltipService,
    ) { }

    ngAfterViewInit() {
        this.element = this.elementRef.nativeElement;
    }

    openTooltip() {
        this.tooltipRef = this.tooltipService.createTooltip(this.uniTooltip, {
            element: this.element,
            orientation: this.orientation
        });
    }

    closeTooltip() {
        this.tooltipRef.destroy();
    }

}