fix(tooltip): add check for multiple targets

Author: RivaIvanova

projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts

@@ -277,6 +277,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
 
     private _destroy$ = new Subject<void>();
     private _autoHideDelay = 180;
+    private _isForceClosed = false;
 
     constructor(private _element: ElementRef,
         @Optional() private _navigationService: IgxNavigationService, private _viewContainerRef: ViewContainerRef) {
@@ -303,6 +304,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         }
 
         this._checkOutletAndOutsideClick();
+        this._checkTooltipForMultipleTargets();
         this._showOnInteraction();
     }
 
@@ -311,10 +313,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      */
     @HostListener('mouseleave')
     public onMouseLeave() {
-        if (this.sticky) {
-            return;
-        }
-
         if (this.tooltipDisabled) {
             return;
         }
@@ -433,10 +431,14 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     }
 
     private _showTooltip(withDelay: boolean, withEvents: boolean): void {
-        if (!this.target.collapsed) {
+        if (!this.target.collapsed && !this._isForceClosed) {
             return;
         }
 
+        if (this._isForceClosed) {
+            this._isForceClosed = false;
+        }
+
         if (withEvents) {
             const showingArgs = { target: this, tooltip: this.target, cancel: false };
             this.tooltipShow.emit(showingArgs);
@@ -457,7 +459,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     }
 
     private _hideOnInteraction(): void {
-        if (!this.target.sticky) {
+        if (!this.sticky) {
             this._setAutoHide();
         }
     }
@@ -470,8 +472,31 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         }, this._autoHideDelay);
     }
 
+    /**
+     * Used when the browser animations are set to a lower percentage
+     * and the user interacts with the target or tooltip __while__ an animation is playing.
+     * It stops the running animation, and the tooltip is instantly shown.
+     */
     private _stopTimeoutAndAnimation(): void {
         clearTimeout(this.target.timeoutId);
         this.target.stopAnimations();
     }
+
+    /**
+     * Used when a single tooltip is used for multiple targets.
+     * If the tooltip is shown for one target and the user interacts with another target,
+     * the tooltip is instantly hidden for the first target.
+     */
+    private _checkTooltipForMultipleTargets(): void {
+        if (!this.target.tooltipTarget) {
+            this.target.tooltipTarget = this;
+        }
+
+        if (this.target.tooltipTarget !== this) {
+            clearTimeout(this.target.timeoutId);
+            this.target.stopAnimations(true);
+            this.target.tooltipTarget = this;
+            this._isForceClosed = true;
+        }
+    }
 }

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts

@@ -72,13 +72,6 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnInit, O
     @Input()
     public context;
 
-
-    /**
-     * Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.
-     */
-    @Input()
-    public sticky = false;
-
     /**
      * Identifier for the tooltip.
      * If this is property is not explicitly set, it will be automatically generated.
@@ -110,15 +103,8 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnInit, O
 
     /**
      * @hidden
-     * Returns whether close time out has started
      */
-    public toBeHidden = false;
-
-    /**
-     * @hidden
-     * Returns whether open time out has started
-     */
-    public toBeShown = false;
+    public tooltipTarget;
 
     /**
      * @hidden
@@ -181,16 +167,31 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnInit, O
         this.onHide();
     }
 
-    protected stopAnimations() {
+    /**
+     * If there is an animation in progress, this method will reset it to its initial state.
+     * Optional `force` parameter that ends the animation.
+     *
+     * @hidden
+     * @param force if set to `true`, the animation will be ended.
+     */
+    protected stopAnimations(force: boolean = false) {
         const info = this.overlayService.getOverlayById(this._overlayId);
 
         if (!info) return;
 
         if (info.openAnimationPlayer) {
             info.openAnimationPlayer.reset();
+            if (force) {
+                info.openAnimationPlayer.finish();
+                info.openAnimationPlayer = null;
+            }
         }
         if (info.closeAnimationPlayer) {
             info.closeAnimationPlayer.reset();
+            if (force) {
+                info.closeAnimationPlayer.finish();
+                info.closeAnimationPlayer = null;
+            }
         }
     }