tooltips from other project

.tmp/ar-tooltip/ar-tooltip.directive.ts

@@ -0,0 +1,127 @@
+import {
+  ComponentRef,
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges
+} from '@angular/core';
+import {Overlay, OverlayPositionBuilder, OverlayRef} from '@angular/cdk/overlay';
+import {ComponentPortal} from '@angular/cdk/portal';
+import {TooltipContentComponent} from './tooltip-content/tooltip-content.component';
+import {TooltipModel} from './tooltip-content/tooltip.model';
+import {ArOverlayPosition, Placement} from '../../common/model/ar-overlay-position';
+import {NavigationStart, Router} from '@angular/router';
+
+@Directive({
+  selector: '[upExtTooltip]',
+  exportAs: 'upExtTooltip'
+})
+export class ArTooltipDirective implements OnInit, OnChanges, OnDestroy {
+
+  @Input() upExtTooltip: string | TooltipModel;
+
+  @Input() placement: Placement = 'top';
+
+  private overlayRef: OverlayRef;
+  private tooltipRef: ComponentRef<TooltipContentComponent>;
+
+  private _enable = true;
+  protected test:string;
+
+  constructor(protected overlayPositionBuilder: OverlayPositionBuilder,
+              protected router: Router,
+              protected elementRef: ElementRef,
+              protected overlay: Overlay) {
+  }
+
+  ngOnInit(): void {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        this.destroyOverlay();
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.tooltipRef && this.upExtTooltip) {
+      this.tooltipRef.instance.tooltip = this.upExtTooltip instanceof TooltipModel ? this.upExtTooltip : new TooltipModel(null, this.upExtTooltip);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyOverlay();
+  }
+
+  @HostListener('mouseover', ['$event'])
+  show($event) {
+    if (this._enable) {
+      $event.stopPropagation();
+      $event.preventDefault();
+      this.open();
+    }
+  }
+
+  open(model?: TooltipModel) {
+    if (!this.overlayRef) {
+      this.createOverlay();
+    }
+
+    if (model) {
+      this.upExtTooltip = model;
+    }
+    if (this.upExtTooltip) {
+      this.overlayRef.detach();
+      const tooltipPortal = new ComponentPortal(TooltipContentComponent);
+      this.tooltipRef = this.overlayRef.attach(tooltipPortal);
+      this.tooltipRef.instance.tooltip = this.upExtTooltip instanceof TooltipModel ? this.upExtTooltip : new TooltipModel(null, this.upExtTooltip);
+    }
+  }
+
+  close() {
+    this.destroyOverlay();
+  }
+
+  @HostListener('mouseout')
+  hideFromMouseOut() {
+    this.detachOverlay();
+  }
+
+  @HostListener('mousedown')
+  hideFromClick() {
+    this._enable = false;
+    this.destroyOverlay();
+  }
+
+  @HostListener('mouseup')
+  _enableTooltip() {
+    this._enable = true;
+  }
+
+  private createOverlay() {
+    const positionStrategy = this.overlayPositionBuilder
+      .flexibleConnectedTo(this.elementRef)
+      .withPositions(ArOverlayPosition.getConnectedPosition(this.placement));
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.close()
+    });
+  }
+
+  private destroyOverlay() {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+  }
+
+  private detachOverlay() {
+    if (this.overlayRef && this.overlayRef.hasAttached()) {
+      this.overlayRef.detach();
+    }
+  }
+
+}

.tmp/ar-tooltip/ar-tooltip.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {ArTooltipDirective} from './ar-tooltip.directive';
+import {TooltipContentComponent} from './tooltip-content/tooltip-content.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OverlayModule,
+  ],
+  declarations: [
+    ArTooltipDirective,
+    TooltipContentComponent,
+  ],
+  exports: [
+    ArTooltipDirective,
+  ],
+  entryComponents: [
+    TooltipContentComponent,
+  ]
+})
+export class ArTooltipModule {
+}

.tmp/ar-tooltip/index.ts

@@ -0,0 +1,3 @@
+export * from './ar-tooltip.directive';
+export * from './ar-tooltip.module';
+export * from './tooltip-content/index';

.tmp/ar-tooltip/tooltip-content/index.ts

@@ -0,0 +1,2 @@
+export * from './tooltip-content.component';
+export * from './tooltip.model';

.tmp/ar-tooltip/tooltip-content/tooltip-content.component.html

@@ -0,0 +1,10 @@
+<div class="tooltip-wrapper">
+  <div *ngIf="tooltip.title && tooltip.body; else onlyBodyOrTile">
+    <div class="tooltip-title">{{tooltip.title}}</div>
+    <div class="tooltip-body">{{tooltip.body}}</div>
+  </div>
+  <ng-template #onlyBodyOrTile>
+    <div *ngIf="tooltip.title" class="tooltip-body">{{tooltip.title}}</div>
+    <div *ngIf="tooltip.body" class="tooltip-body">{{tooltip.body}}</div>
+  </ng-template>
+</div>

.tmp/ar-tooltip/tooltip-content/tooltip-content.component.scss

@@ -0,0 +1,22 @@
+@import "../../../../../../../assets/styles/ar-typography";
+
+.tooltip-wrapper {
+  background-color: $aci-white;
+  box-shadow: 2px 3px 20px 0 rgba(0, 0, 0, 0.1);
+  padding: 12px 16px;
+  max-width: 300px;
+  font-size: 13px;
+  opacity: 0.95;
+
+  .tooltip-title {
+    @extend .aci-font-style-f8, .aci-grey-1;
+    padding-bottom: 4px;
+  }
+
+  .tooltip-body {
+    @extend .aci-font-style-f9, .aci-grey-1;
+  }
+
+}
+
+

.tmp/ar-tooltip/tooltip-content/tooltip-content.component.ts

@@ -0,0 +1,19 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {TooltipModel} from './tooltip.model';
+
+@Component({
+  selector: 'up-ext-tooltip-content',
+  templateUrl: './tooltip-content.component.html',
+  styleUrls: ['./tooltip-content.component.scss']
+})
+export class TooltipContentComponent implements OnInit {
+
+  @Input() tooltip: TooltipModel;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

.tmp/ar-tooltip/tooltip-content/tooltip.model.ts

@@ -0,0 +1,4 @@
+export class TooltipModel {
+  constructor(public title: string, public body: string) {
+  }
+}