Hide the tooltip on destroying its target. (#15786)

* fix(Tooltip): Hide the tooltip on destroying the target.

Author: gedinakova

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

@@ -314,6 +314,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      * @hidden
      */
     public ngOnDestroy() {
+        this.hideTooltip();
         this.destroy$.next();
         this.destroy$.complete();
     }

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

@@ -271,6 +271,19 @@ describe('IgxTooltip', () => {
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
         }));
 
+        it('IgxTooltip is hidden when its target is destroyed', fakeAsync(() => {
+            hoverElement(button);
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+            
+            fix.componentInstance.showButton = false;
+            fix.detectChanges();
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
+        }));
+
         describe('Tooltip events', () => {
             // configureTestSuite();
             it('should emit the proper events when hovering/unhovering target', fakeAsync(() => {
@@ -596,7 +609,7 @@ const touchElement = (element) => element.nativeElement.dispatchEvent(new TouchE
 const verifyTooltipVisibility = (tooltipNativeElement, tooltipTarget, shouldBeVisible: boolean) => {
     expect(tooltipNativeElement.classList.contains(TOOLTIP_CLASS)).toBe(shouldBeVisible);
     expect(tooltipNativeElement.classList.contains(HIDDEN_TOOLTIP_CLASS)).not.toBe(shouldBeVisible);
-    expect(tooltipTarget.tooltipHidden).not.toBe(shouldBeVisible);
+    expect(tooltipTarget?.tooltipHidden).not.toBe(shouldBeVisible);
 };
 
 const verifyTooltipPosition = (tooltipNativeElement, actualTarget, shouldBeAligned: boolean) => {

projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts

@@ -6,11 +6,14 @@ import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/togg
 @Component({
     template: `
     <div class="dummyDiv">dummy div for touch tests</div>
-    <button [igxTooltipTarget]="tooltipRef" [tooltip]="'Infragistics Inc. HQ'"
-            (tooltipShow)="showing($event)" (tooltipHide)="hiding($event)"
-            style="margin: 200px">
-        Hover me
-    </button>
+    
+    @if (showButton) {
+        <button [igxTooltipTarget]="tooltipRef" [tooltip]="'Infragistics Inc. HQ'"
+                (tooltipShow)="showing($event)" (tooltipHide)="hiding($event)"
+                style="margin: 200px">
+            Hover me
+        </button>
+    }
     <div igxTooltip #tooltipRef="tooltip">
         Hello, I am a tooltip!
     </div>
@@ -20,9 +23,10 @@ import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/togg
 })
 export class IgxTooltipSingleTargetComponent {
     @ViewChild(IgxTooltipDirective, { static: true }) public tooltip: IgxTooltipDirective;
-    @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective;
+    @ViewChild(IgxTooltipTargetDirective, { static: false }) public tooltipTarget: IgxTooltipTargetDirective;
     public cancelShowing = false;
     public cancelHiding = false;
+    public showButton = true;
 
     public showing(args: ITooltipShowEventArgs) {
         if (this.cancelShowing) {