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

import { Directive, forwardRef, Input, AfterViewInit, ElementRef, ViewContainerRef, OnDestroy, NgZone } from '@angular/core';
import { ControlValueAccessor, 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';

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;

  @Input('c3Tooltip') tooltip: C3Tooltip;

  @Input('c3TooltipDisabled') disabled: Boolean = false;

  /** The default delay in ms before showing the tooltip after show is called */
  @Input('c3TooltipShowDelay') showDelay = 0;

  /** The default delay in ms before hiding the tooltip after hide is called */
  @Input('c3TooltipHideDelay') hideDelay = 0;

  private _manualListeners = new Map<string, EventListenerOrEventListenerObject>();

  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() {
    const overlayRef = this._overlay.create(this.getOverlayConfig());
    const portal = new TemplatePortal(this.tooltip.template, this._viewContainerRef);
    overlayRef.attach(portal);

    this.overlayRef = overlayRef;
  }

  hide() {
    this.overlayRef.detach();
  }

  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
    })
  }
}