agent/shared/src/directives/tooltip/tooltip.directive.ts

import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';

@Directive({
    selector: '[data-toggle="tooltip"]'
})
export class TooltipDirective implements AfterContentInit, OnChanges {

    @HostBinding('attr.data-placement') placement: string;
    @Input('title') title: string;
    @Input('html') html: boolean;

    private customTooltipTemplate = `
        <div class="tooltip">
            <div class="tooltip-arrow"></div>
            <div class="tooltip-inner"></div>
        </div>
    `;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

    ngAfterContentInit() {
        this.init();
    }

    public ngOnChanges(changes: SimpleChanges): void {
        if (changes['title']) {
            this.fixTitle();
        }
    }

    private init() {
        jQuery(this.elementRef.nativeElement).tooltip({
            placement: this.placement,
            html: this.html,
            template: this.customTooltipTemplate,
            title: this.title
        });
    }

    private fixTitle() {
        jQuery(this.elementRef.nativeElement)
            .attr('title', this.title)
            .tooltip('fixTitle');
    }
}