angular-tooltip-html/src/app/c3-tooltip/c3-tooltipTrigger.ts

import { Directive, forwardRef, Input, AfterViewInit, ElementRef, ViewContainerRef, OnDestroy, NgZone } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { C3Tooltip } from './c3-tooltip.component';
import { Overlay, OverlayConfig, ScrollDispatcher, OverlayRef } from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';
import { TemplatePortal } from '@angular/cdk/portal';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => C3TooltipTrigger),
  multi: true
};

@Directive({
  selector: '[c3Tooltip]',
  exportAs: 'c3TooltipTrigger',
  providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
})
export class C3TooltipTrigger implements AfterViewInit, OnDestroy {
  overlayRef: OverlayRef | null;

  /** The timeout ID of any current timer set to show the tooltip */
  _showTimeoutId: number | null;

  /** The timeout ID of any current timer set to hide the tooltip */
  _hideTimeoutId: number | null;

  private _manualListeners = new Map<string, EventListenerOrEventListenerObject>();
  private _tooltipClass: string | string[] | Set<string> | { [key: string]: any };
  private _tootipDisabled: boolean = false;

  @Input('c3Tooltip') tooltip: C3Tooltip;

  @Input('c3TooltipDisabled')
  get tooltipDisabled(): boolean { return this._tootipDisabled; }
  set tooltipDisabled(value: boolean) {
    this._tootipDisabled = coerceBooleanProperty(value)
  };

  @Input('c3TooltipShowDelay') showDelay = 0;

  @Input('c3TooltipHideDelay') hideDelay = 0;

  @Input('c3TooltipClass')
  get tooltipClass() { return this._tooltipClass; }
  set tooltipClass(value: string | string[] | Set<string> | { [key: string]: any }) {
    this._tooltipClass = value;
    if (this.tooltip) {
      this.tooltip.tooltipClass = this._tooltipClass;
      this.tooltip._markForCheck()
    }
  }

  constructor(
    private _element: ElementRef<HTMLElement>,
    private _overlay: Overlay,
    platform: Platform,
    private _ngZone: NgZone,
    private _scrollDispatcher: ScrollDispatcher,
    private _viewContainerRef: ViewContainerRef) {
    if (!platform.IOS && !platform.ANDROID) {
      this._manualListeners
        .set('mouseenter', () => this.show())
        .set('mouseleave', () => this.hide());
    }
  }

  ngAfterViewInit() {
    this._manualListeners.forEach((listener, event) => this._element.nativeElement.addEventListener(event, listener));
  }

  ngOnDestroy() {
    this._manualListeners.forEach((listener, event) => {
      this._element.nativeElement.removeEventListener(event, listener);
    });
    this._manualListeners.clear();
  }

  show(delay: number = this.showDelay) {
    if (this.tooltipDisabled) {
      return;
    }

    if (this._hideTimeoutId) {
      clearTimeout(this._hideTimeoutId);
      this._hideTimeoutId = null;
    }
    this._showTimeoutId = window.setTimeout(() => {
      this._showTimeoutId = null;

      const overlayRef = this._overlay.create(this.getOverlayConfig());
      const portal = new TemplatePortal(this.tooltip.template, this._viewContainerRef);
      overlayRef.attach(portal);

      this.overlayRef = overlayRef;
    }, delay);
  }

  hide(delay: number = this.hideDelay) {
    if (this._showTimeoutId) {
      clearTimeout(this._showTimeoutId);
      this._showTimeoutId = null;
    }

    this._hideTimeoutId = window.setTimeout(() => {
      this._hideTimeoutId = null;

      if (this.overlayRef && this.overlayRef.hasAttached())
        this.overlayRef.detach();
    }, delay);
  }

  private getOverlayConfig(): OverlayConfig {
    const positionStrategy = this._overlay.position()
      .flexibleConnectedTo(this._element)
      .withPositions([{
        originX: 'start',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
      }])
      .withViewportMargin(8);

    return new OverlayConfig({
      positionStrategy
    })
  }
}