Merge branch 'feature/align-tooltip' of https://github.com/IgniteUI/igniteui-angular into feature/align-tooltip

Zneeky · Zneeky · commit 9e27017b3ae0 · 2025-05-14T17:03:40.000+03:00
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/README.md b/projects/igniteui-angular/src/lib/directives/tooltip/README.md
@@ -104,8 +104,8 @@ Since the **IgxTooltip** directive extends the **IgxToggle** directive and there
 ### Methods
 | Name | Type | Arguments | Description |
 | :--- |:--- | :--- | :--- |
-| showTooltip | void | N/A | Shows the tooltip after the amount of ms specified by the `showDelay` property. |
-| hideTooltip | void | N/A | Hides the tooltip after the amount of ms specified by the `hideDelay` property. |
+| showTooltip | void | N/A | Shows the tooltip. |
+| hideTooltip | void | N/A | Hides the tooltip. |
 
 ### Events
 |Name|Description|Cancelable|Event arguments|
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
@@ -56,7 +56,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      * ```
      */
     @Input()
-    public showDelay = 500;
+    public showDelay = 200;
 
     /**
      * Gets/sets the amount of milliseconds that should pass before hiding the tooltip.
@@ -73,7 +73,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      * ```
      */
     @Input()
-    public hideDelay = 500;
+    public hideDelay = 300;
 
     /**
      * Controls whether the arrow element of the tooltip is rendered.
@@ -275,7 +275,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     @Output()
     public tooltipHide = new EventEmitter<ITooltipHideEventArgs>();
 
-    private destroy$ = new Subject<void>();
+    private _destroy$ = new Subject<void>();
+    private _autoHideDelay = 180;
 
     constructor(private _element: ElementRef,
         @Optional() private _navigationService: IgxNavigationService, private _viewContainerRef: ViewContainerRef) {
@@ -288,7 +289,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     @HostListener('click')
     public override onClick() {
         if (!this.target.collapsed) {
-            this.target.forceClose(this.mergedOverlaySettings);
+            this._hideOnInteraction();
         }
     }
 
@@ -301,24 +302,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
-        this.checkOutletAndOutsideClick();
-        const shouldReturn = this.preMouseEnterCheck();
-        if (shouldReturn) {
-            return;
-        }
-
-        const showingArgs = { target: this, tooltip: this.target, cancel: false };
-        this.tooltipShow.emit(showingArgs);
-
-        if (showingArgs.cancel) {
-            return;
-        }
-
-        this.target.toBeShown = true;
-        this.target.timeoutId = setTimeout(() => {
-            this.target.open(this.mergedOverlaySettings); // Call open() of IgxTooltipDirective
-            this.target.toBeShown = false;
-        }, this.showDelay);
+        this._checkOutletAndOutsideClick();
+        this._showOnInteraction();
     }
 
     /**
@@ -334,19 +319,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
-        this.checkOutletAndOutsideClick();
-        const shouldReturn = this.preMouseLeaveCheck();
-        if (shouldReturn || this.target.collapsed) {
-            return;
-        }
-
-        this.target.toBeHidden = true;
-        this.target.timeoutId = setTimeout(() => {
-            this.target.close(); // Call close() of IgxTooltipDirective
-            this.target.toBeHidden = false;
-        }, this.hideDelay);
-
-
+        this._checkOutletAndOutsideClick();
+        this._hideOnInteraction();
     }
 
     /**
@@ -358,7 +332,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
-        this.showTooltip();
+        this._showOnInteraction();
     }
 
     /**
@@ -373,7 +347,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         if (this.nativeElement !== event.target &&
             !this.nativeElement.contains(event.target)
         ) {
-            this.hideTooltip();
+            this._hideOnInteraction();
         }
     }
 
@@ -394,118 +368,110 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._overlayDefaults.closeOnOutsideClick = false;
         this._overlayDefaults.closeOnEscape = true;
 
-        this.target.closing.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+        this.target.closing.pipe(takeUntil(this._destroy$)).subscribe((event) => {
             const hidingArgs = { target: this, tooltip: this.target, cancel: false };
             this.tooltipHide.emit(hidingArgs);
 
             if (hidingArgs.cancel) {
                 event.cancel = true;
             }
         });
+
+        this.target.onShow = this._showOnInteraction.bind(this);
+        this.target.onHide = this._hideOnInteraction.bind(this);
     }
 
     /**
      * @hidden
      */
     public ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        this._destroy$.next();
+        this._destroy$.complete();
     }
 
     /**
-     * Shows the tooltip by respecting the 'showDelay' property.
+     * Shows the tooltip if not already shown.
      *
      * ```typescript
      * this.tooltipTarget.showTooltip();
      * ```
      */
     public showTooltip() {
-        clearTimeout(this.target.timeoutId);
-
-        if (!this.target.collapsed) {
-            //  if close animation has started finish it, or close the tooltip with no animation
-            this.target.forceClose(this.mergedOverlaySettings);
-            this.target.toBeHidden = false;
-        }
-
-        const showingArgs = { target: this, tooltip: this.target, cancel: false };
-        this.tooltipShow.emit(showingArgs);
-
-        if (showingArgs.cancel) {
-            return;
-        }
-
-        this.target.toBeShown = true;
-        this.target.timeoutId = setTimeout(() => {
-            this.target.open(this.mergedOverlaySettings); // Call open() of IgxTooltipDirective
-            this.target.toBeShown = false;
-        }, this.showDelay);
+        this._showTooltip(false, true);
     }
 
     /**
-     * Hides the tooltip by respecting the 'hideDelay' property.
+     * Hides the tooltip if not already hidden.
      *
      * ```typescript
      * this.tooltipTarget.hideTooltip();
      * ```
      */
     public hideTooltip() {
-        if (this.target.collapsed && this.target.toBeShown) {
-            clearTimeout(this.target.timeoutId);
-        }
-
-        if (this.target.collapsed || this.target.toBeHidden) {
-            return;
-        }
+        this._hideTooltip(false);
+    }
 
-        this.target.toBeHidden = true;
-        this.target.timeoutId = setTimeout(() => {
-            this.target.close(); // Call close() of IgxTooltipDirective
-            this.target.toBeHidden = false;
-        }, this.hideDelay);
+    private get _mergedOverlaySettings() {
+        return Object.assign({}, this._overlayDefaults, this.overlaySettings);
     }
 
-    private checkOutletAndOutsideClick() {
+    private _checkOutletAndOutsideClick(): void {
         if (this.outlet) {
             this._overlayDefaults.outlet = this.outlet;
         }
     }
 
-    private get mergedOverlaySettings() {
-        return Object.assign({}, this._overlayDefaults, this.overlaySettings);
+    private _hideTooltip(withDelay: boolean): void {
+        if (this.target.collapsed) {
+            return;
+        }
+
+        this.target.timeoutId = setTimeout(() => {
+            // Call close() of IgxTooltipDirective
+            this.target.close();
+        }, withDelay ? this.hideDelay : 0);
     }
 
-    // Return true if the execution in onMouseEnter should be terminated after this method
-    private preMouseEnterCheck() {
-        // If tooltip is about to be opened
-        if (this.target.toBeShown) {
-            clearTimeout(this.target.timeoutId);
-            this.target.toBeShown = false;
+    private _showTooltip(withDelay: boolean, withEvents: boolean): void {
+        if (!this.target.collapsed) {
+            return;
         }
 
-        // If Tooltip is opened or about to be hidden
-        if (!this.target.collapsed || this.target.toBeHidden) {
-            clearTimeout(this.target.timeoutId);
+        if (withEvents) {
+            const showingArgs = { target: this, tooltip: this.target, cancel: false };
+            this.tooltipShow.emit(showingArgs);
 
-            //  if close animation has started finish it, or close the tooltip with no animation
-            this.target.forceClose(this.mergedOverlaySettings);
-            this.target.toBeHidden = false;
+            if (showingArgs.cancel) return;
         }
 
-        return false;
+        this.target.timeoutId = setTimeout(() => {
+            // Call open() of IgxTooltipDirective
+            this.target.open(this._mergedOverlaySettings);
+        }, withDelay ? this.showDelay : 0);
     }
 
-    // Return true if the execution in onMouseLeave should be terminated after this method
-    private preMouseLeaveCheck(): boolean {
-        clearTimeout(this.target.timeoutId);
 
-        // If tooltip is about to be opened
-        if (this.target.toBeShown) {
-            this.target.toBeShown = false;
-            this.target.toBeHidden = false;
-            return true;
+    private _showOnInteraction(): void {
+        this._stopTimeoutAndAnimation();
+        this._showTooltip(true, true);
+    }
+
+    private _hideOnInteraction(): void {
+        if (!this.target.sticky) {
+            this._setAutoHide();
         }
+    }
+
+    private _setAutoHide(): void {
+        this._stopTimeoutAndAnimation();
+
+        this.target.timeoutId = setTimeout(() => {
+            this._hideTooltip(true);
+        }, this._autoHideDelay);
+    }
 
-        return false;
+    private _stopTimeoutAndAnimation(): void {
+        clearTimeout(this.target.timeoutId);
+        this.target.stopAnimations();
     }
 }
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
@@ -46,8 +46,8 @@ describe('IgxTooltip', () => {
         }));
 
         it('IgxTooltipTargetDirective default values', () => {
-            expect(tooltipTarget.showDelay).toBe(500);
-            expect(tooltipTarget.hideDelay).toBe(500);
+            expect(tooltipTarget.showDelay).toBe(200);
+            expect(tooltipTarget.hideDelay).toBe(300);
             expect(tooltipTarget.tooltipDisabled).toBe(false);
             expect(tooltipTarget.overlaySettings).toBeUndefined();
         });
@@ -156,20 +156,17 @@ describe('IgxTooltip', () => {
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
         }));
 
-        it('showing tooltip through API respects showDelay', fakeAsync(() => {
+        it('showing tooltip through API does NOT respect showDelay', fakeAsync(() => {
             tooltipTarget.showDelay = 400;
             fix.detectChanges();
 
             tooltipTarget.showTooltip();
 
             tick(300);
-            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
-
-            tick(100);
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
         }));
 
-        it('hiding tooltip through API respects hideDelay', fakeAsync(() => {
+        it('hiding tooltip through API does NOT respect hideDelay', fakeAsync(() => {
             tooltipTarget.hideDelay = 450;
             fix.detectChanges();
 
@@ -179,9 +176,6 @@ describe('IgxTooltip', () => {
             tooltipTarget.hideTooltip();
 
             tick(400);
-            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
-
-            tick(50);
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
         }));
 
@@ -193,25 +187,21 @@ describe('IgxTooltip', () => {
 
             hoverElement(button);
 
-            tick(250);
+            tick(100);
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
 
-            tick(250);
+            tick(100);
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
         }));
 
         it('IgxTooltip closes and reopens if opening it through API multiple times', fakeAsync(() => {
-            tooltipTarget.showTooltip();
-            tick(500);
-
-            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+            spyOn(tooltipTarget.target, 'forceClose').and.callThrough();
 
             tooltipTarget.showTooltip();
-            tick(250);
-            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
+            tick();
 
-            tick(250);
-            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+            tooltipTarget.showTooltip();
+            expect(tooltipTarget.target.forceClose).toHaveBeenCalledTimes(1);
         }));
 
         it('IgxTooltip respects the passed overlaySettings', fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts
