From 0f7a9072a00de5610e6a13fd549089f39000339e Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 16 Feb 2021 00:05:46 +0100
Subject: [PATCH] Delay tooltip.

---
 .../angular/modals/tooltip.directive.ts       | 38 ++++++++++++++++---
 .../components/schema-category.component.html |  4 +-
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/frontend/app/framework/angular/modals/tooltip.directive.ts b/frontend/app/framework/angular/modals/tooltip.directive.ts
index beef85be5..c48b385ae 100644
--- a/frontend/app/framework/angular/modals/tooltip.directive.ts
+++ b/frontend/app/framework/angular/modals/tooltip.directive.ts
@@ -7,18 +7,22 @@
 
 // tslint:disable: directive-selector
 
-import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, OnDestroy, Renderer2 } from '@angular/core';
 import { DialogService, Tooltip } from '@app/framework/internal';
 
 @Directive({
     selector: '[title]'
 })
-export class TooltipDirective {
+export class TooltipDirective implements OnDestroy {
     private titleText: string;
+    private timer: any;
 
     @Input()
     public titlePosition = 'top-right';
 
+    @Input()
+    public titleDelay = 1000;
+
     @Input()
     public set title(value: string) {
         this.titleText = value;
@@ -33,25 +37,47 @@ export class TooltipDirective {
     ) {
     }
 
+    public ngOnDestroy() {
+        this.hide();
+    }
+
     @HostListener('mouseenter')
     public onMouseEnter() {
+        this.hide();
+
         if (this.titleText) {
-            this.dialogs.tooltip(new Tooltip(this.element.nativeElement, this.titleText, this.titlePosition));
+            if (this.titleDelay > 0) {
+                this.timer = setTimeout(() => {
+                    this.show();
+                }, this.titleDelay);
+            } else {
+                this.show();
+            }
         }
     }
 
     @HostListener('mouseleave')
     public onMouseLeave() {
-        if (this.titleText) {
-            this.dialogs.tooltip(new Tooltip(this.element.nativeElement, null, this.titlePosition));
-        }
+        this.hide();
     }
 
     @HostListener('click')
     public onClick() {
+        this.hide();
+    }
+
+    private hide() {
         if (this.titleText) {
             this.dialogs.tooltip(new Tooltip(this.element.nativeElement, null, this.titlePosition));
         }
+
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+    }
+
+    private show() {
+        this.dialogs.tooltip(new Tooltip(this.element.nativeElement, this.titleText, this.titlePosition));
     }
 
     private unsetAttribute() {
diff --git a/frontend/app/shared/components/schema-category.component.html b/frontend/app/shared/components/schema-category.component.html
index 6ab316365..8c14befa6 100644
--- a/frontend/app/shared/components/schema-category.component.html
+++ b/frontend/app/shared/components/schema-category.component.html
@@ -68,8 +68,8 @@
     
         <ng-template #simpleMode>
             <li *ngFor="let schema of filteredSchemas; trackBy: trackBySchema" class="nav-item">
-                <a class="nav-link" [routerLink]="schemaRoute(schema)" routerLinkActive="active">
-                    <span class="schema-name" *ngIf="forContent">{{schema.displayName}}</span>
+                <a class="nav-link" [routerLink]="schemaRoute(schema)" routerLinkActive="active" title="{{schema.displayName}}" titlePosition="top-left">
+                    <span class="schema-name">{{schema.displayName}}</span>
                 </a>
             </li>
         </ng-template>