@Directive({
selector: '[tooltip]'
})
class TooltipDirective {
@Input() tooltip;
private _tooltipEle;
constructor(private el: ElementRef) {}
ngAfterContentInit() {
this._tooltipEle = $(`<div class="tooltip">${this.tooltip}<div class="tooltip-arrow"></div></div>`).appendTo( "body" );
this._createTooltip();
}
@HostListener("mouseover")
showTooltip() {
this.toggleTooltip();
}
@HostListener("mouseout")
removeTooltip() {
this.toggleTooltip();
}
private _createTooltip() {
// create tooltip...
}
toggleTooltip() {
this._tooltipEle.toggleClass("tooltip-show")
}
}