fix(tooltip): make touch events passive

Author: RivaIvanova

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

@@ -258,26 +258,27 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     /**
      * @hidden
      */
-    @HostListener('touchstart')
     public onTouchStart() {
         if (this.tooltipDisabled) {
             return;
         }
 
+        this.target.tooltipTarget = this;
         this.showTooltip();
     }
 
     /**
      * @hidden
      */
-    @HostListener('document:touchstart', ['$event'])
     public onDocumentTouchStart(event) {
         if (this.tooltipDisabled) {
             return;
         }
 
-        if (this.nativeElement !== event.target &&
-            !this.nativeElement.contains(event.target)
+        const tooltipTarget = this.target.tooltipTarget.nativeElement;
+
+        if (tooltipTarget !== event.target &&
+            !tooltipTarget.contains(event.target)
         ) {
             this.hideTooltip();
         }
@@ -308,13 +309,17 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
                 event.cancel = true;
             }
         });
+
+        this.nativeElement.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: true });
+        this.target.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
     }
 
     /**
      * @hidden
      */
     public ngOnDestroy() {
         this.hideTooltip();
+        this.nativeElement.removeEventListener('touchstart', this.onTouchStart);
         this.destroy$.next();
         this.destroy$.complete();
     }

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

@@ -1,10 +1,12 @@
 import {
-    Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject
+    Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject,
+    OnDestroy
 } from '@angular/core';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { OverlaySettings } from '../../services/public_api';
 import { IgxNavigationService } from '../../core/navigation';
 import { IgxToggleDirective } from '../toggle/toggle.directive';
+import { first, Subject, takeUntil } from 'rxjs';
 
 let NEXT_ID = 0;
 /**
@@ -26,7 +28,7 @@ let NEXT_ID = 0;
     selector: '[igxTooltip]',
     standalone: true
 })
-export class IgxTooltipDirective extends IgxToggleDirective {
+export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy {
     /**
      * @hidden
      */
@@ -102,6 +104,14 @@ export class IgxTooltipDirective extends IgxToggleDirective {
      */
     public toBeShown = false;
 
+    /** @hidden */
+    public tooltipTarget;
+
+    /** @hidden */
+    public onDocumentTouchStart: (event?: Event) => void;
+
+    private _destroy$ = new Subject<boolean>();
+
     /** @hidden */
     constructor(
         elementRef: ElementRef,
@@ -110,6 +120,19 @@ export class IgxTooltipDirective extends IgxToggleDirective {
         @Optional() navigationService: IgxNavigationService) {
         // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
         super(elementRef, cdr, overlayService, navigationService);
+
+        this.opening.pipe(first(), takeUntil(this._destroy$)).subscribe(() => {
+            document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
+        });
+    }
+
+    /** @hidden */
+    public override ngOnDestroy() {
+        super.ngOnDestroy();
+
+        document.removeEventListener('touchstart', this.onDocumentTouchStart);
+        this._destroy$.next(true);
+        this._destroy$.complete();
     }
 
     /**