All files / src/core/directives tooltip.directive.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
1x
 
 
 
 
1x
1x
 
 
 
 
1x
 
1x
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
    ComponentFactoryResolver,
    Directive, HostListener, Input,
    ViewContainerRef
} from '@angular/core';
import { TlToolTip } from '../../tooltip/tooltip';
import { TooltipOptions } from '../../tooltip/tooltipOptions';
 
@Directive( {
    selector: '[tooltip]'
} )
export class TooltipDirective {
 
    @Input() tooltip: TooltipOptions;
 
    constructor( private view: ViewContainerRef, private compiler: ComponentFactoryResolver ) {
    }
 
    @HostListener( 'mouseenter' )
    onMouseEnter() {
        this.show();
    }
 
    @HostListener( 'mouseleave' )
    onMouseLeave() {
        this.hide();
    }
 
    show() {
        const componentFactory = this.compiler.resolveComponentFactory( TlToolTip );
        const componentRef = this.view.createComponent( componentFactory );
        (<TlToolTip>componentRef.instance).setOptions( this.tooltip );
        (<TlToolTip>componentRef.instance).setPosition( this.view.element );
    }
 
    hide() {
        this.view.clear();
    }
}