[NIFI-13747] - Add a delay before displaying tooltips (#9269)

This closes #9269

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts

@@ -1187,6 +1187,7 @@ export class CanvasUtils {
      */
     public canvasTooltip<C>(type: Type<C>, selection: any, tooltipData: any): void {
         let closeTimer = -1;
+        let openTimer = -1;
         const overlay = this.overlay;
         let overlayRef: OverlayRef | null = null;
 
@@ -1212,31 +1213,37 @@ export class CanvasUtils {
                         ])
                         .withPush(true);
 
-                    overlayRef = overlay.create({ positionStrategy });
+                    openTimer = window.setTimeout(() => {
+                        overlayRef = overlay.create({ positionStrategy });
+
+                        const tooltipReference = overlayRef.attach(new ComponentPortal(type));
+                        tooltipReference.setInput('data', tooltipData);
+
+                        // register mouse events
+                        tooltipReference.location.nativeElement.addEventListener('mouseenter', () => {
+                            if (closeTimer > 0) {
+                                window.clearTimeout(closeTimer);
+                                closeTimer = -1;
+                            }
+                        });
+                        tooltipReference.location.nativeElement.addEventListener('mouseleave', () => {
+                            overlayRef?.detach();
+                            overlayRef?.dispose();
+                            overlayRef = null;
+                        });
+                    }, NiFiCommon.TOOLTIP_DELAY_OPEN_MILLIS);
                 }
-
-                const tooltipReference = overlayRef.attach(new ComponentPortal(type));
-                tooltipReference.setInput('data', tooltipData);
-
-                // register mouse events
-                tooltipReference.location.nativeElement.addEventListener('mouseenter', () => {
-                    if (closeTimer > 0) {
-                        window.clearTimeout(closeTimer);
-                        closeTimer = -1;
-                    }
-                });
-                tooltipReference.location.nativeElement.addEventListener('mouseleave', () => {
-                    overlayRef?.detach();
-                    overlayRef?.dispose();
-                    overlayRef = null;
-                });
             })
             .on('mouseleave', function () {
+                if (openTimer > 0) {
+                    window.clearTimeout(openTimer);
+                    openTimer = -1;
+                }
                 closeTimer = window.setTimeout(() => {
                     overlayRef?.detach();
                     overlayRef?.dispose();
                     overlayRef = null;
-                }, 400);
+                }, NiFiCommon.TOOLTIP_DELAY_OPEN_MILLIS);
             });
     }
 

nifi-frontend/src/main/frontend/libs/shared/src/directives/nifi-tooltip.directive.ts

@@ -18,6 +18,7 @@
 import { Directive, ElementRef, HostListener, Input, OnDestroy, Type } from '@angular/core';
 import { ConnectedPosition, Overlay, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { NiFiCommon } from '../services';
 
 @Directive({
     selector: '[nifiTooltip]',
@@ -29,10 +30,12 @@ export class NifiTooltipDirective<T> implements OnDestroy {
     @Input() tooltipInputData: any;
     @Input() position: ConnectedPosition | undefined;
     @Input() delayClose = true;
+    @Input() delayOpen = true;
 
     private closeTimer = -1;
     private overlayRef: OverlayRef | null = null;
     private overTip = false;
+    private openTimer = -1;
 
     constructor(
         private element: ElementRef<HTMLElement>,
@@ -41,8 +44,16 @@ export class NifiTooltipDirective<T> implements OnDestroy {
 
     @HostListener('mouseenter')
     mouseEnter() {
-        if (!this.overlayRef?.hasAttached()) {
+        if (this.delayOpen) {
-            this.attach();
+            this.openTimer = window.setTimeout(() => {
+                if (!this.overlayRef?.hasAttached()) {
+                    this.attach();
+                }
+            }, NiFiCommon.TOOLTIP_DELAY_OPEN_MILLIS);
+        } else {
+            if (!this.overlayRef?.hasAttached()) {
+                this.attach();
+            }
         }
     }
 
@@ -53,11 +64,15 @@ export class NifiTooltipDirective<T> implements OnDestroy {
                 this.closeTimer = window.setTimeout(() => {
                     this.overlayRef?.detach();
                     this.closeTimer = -1;
-                }, 400);
+                }, NiFiCommon.TOOLTIP_DELAY_CLOSE_MILLIS);
             } else {
                 this.overlayRef?.detach();
             }
         }
+        if (this.openTimer > 0) {
+            window.clearTimeout(this.openTimer);
+            this.openTimer = -1;
+        }
     }
 
     @HostListener('mousemove')

nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.ts

@@ -42,6 +42,9 @@ export class NiFiCommon {
 
     public static readonly PACKAGE_SEPARATOR: string = '.';
 
+    public static readonly TOOLTIP_DELAY_CLOSE_MILLIS: number = 400;
+    public static readonly TOOLTIP_DELAY_OPEN_MILLIS: number = 500;
+
     private policyTypeListing: SelectOption[] = [
         {
             text: 'view the user interface',