Skip to content
Snippets Groups Projects
Select Git revision
  • ef41c1bff98c67bfb05006a97bf8f7bd3844b95a
  • main default protected
  • optimize-storybook
  • OZG-8405-Alfa-Bearbeiter-auswählen-und-entfernen-Design
  • OZG-7986-mandat-anfragen
  • OZG-6978-prevent-other-pages-from-being-called
  • OZG-8378-ods-heading
  • OZG-8314-Alfa-Vorgang-Bearbeiter-Zuweisung-entfernen
  • testing-imports
  • storybook-improvements
  • OZG-7287-forward-saml-token
  • release-administration
  • OZG-8422-BenutzerSpeichern
  • release-info
  • release
  • OZG-7856_schadcode-scanner-e2e
  • OZG-7985-fix-sorting
  • OZG-8305-Create-webpack-sbom
  • tooltip-improvements
  • OZG-7714-UpgradeKeycloakDependencyTo25
  • OZG-8086-Admin-Datenanfrage-erstellen
  • 1.12.1-administration
  • 1.12.0-administration
  • 1.12.0-info
  • 2.27.0-alfa
  • 1.11.0-info
  • 1.11.0-administration
  • 2.26.0-alfa
  • 1.10.0-info
  • 1.10.0-administration
  • 2.25.0-alfa
  • 1.9.0-info
  • 1.9.0-administration
  • 2.24.0-alfa
  • 1.8.0-info
  • 1.8.0-administration
  • 2.23.0-alfa
  • 1.7.0-info
  • 1.7.0-administration
  • 2.22.0-alfa
  • 1.6.0-info
41 results

tooltip.directive.ts

Blame
  • user avatar
    OZGCloud authored
    ef41c1bf
    History
    tooltip.directive.ts 1.47 KiB
    import { ComponentRef, Directive, ElementRef, HostListener, Injector, Input, OnDestroy, ViewContainerRef } from '@angular/core';
    import { TooltipComponent } from './tooltip.component';
    
    @Directive({
      selector: '[tooltip]',
    })
    export class TooltipDirective implements OnDestroy {
      @Input() tooltip: string = '';
    
      private componentRef: ComponentRef<TooltipComponent> = null;
    
      constructor(
        private elementRef: ElementRef<HTMLElement>,
        private injector: Injector,
        private viewContainerRef: ViewContainerRef,
      ) {}
    
      ngOnDestroy(): void {
        this.destroy();
      }
    
      @HostListener('mouseenter')
      onMouseEnter(): void {
        if (this.componentRef === null) {
          this.componentRef = this.viewContainerRef.createComponent(TooltipComponent, {
            injector: this.injector,
          });
          this.viewContainerRef.insert(this.componentRef.hostView);
          this.setTooltipProperties();
        }
      }
    
      @HostListener('mouseleave')
      @HostListener('window:scroll')
      destroyTooltip(): void {
        this.destroy();
      }
    
      private setTooltipProperties() {
        if (this.componentRef !== null) {
          const { left, right, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
          this.componentRef.instance.left = (right + left) / 2;
          this.componentRef.instance.top = bottom;
          this.componentRef.instance.tooltip = this.tooltip;
        }
      }
    
      private destroy(): void {
        if (this.componentRef !== null) {
          this.componentRef.destroy();
          this.componentRef = null;
        }
      }
    }