fix(material/tooltip): better touch device detection

Currently the touch device detection in the tooltip is based purely on the `Platform` provider which isn't able to detect some newer iOS devices properly.

These changes add an additional check through a media query.

Fixes #32503.
Fixes #25287.

Author: crisbeto

src/material/tooltip/testing/tooltip-harness.ts

@@ -43,7 +43,7 @@ export class MatTooltipHarness extends ComponentHarness {
     // We need to dispatch both `touchstart` and a hover event, because the tooltip binds
     // different events depending on the device. The `changedTouches` is there in case the
     // element has ripples.
-    await host.dispatchEvent('touchstart', {changedTouches: []});
+    await host.dispatchEvent('touchstart', {changedTouches: [], _isHarnessEvent: true});
     await host.hover();
     const panel = await this._optionalPanel();
     await panel?.dispatchEvent('animationend', {animationName: this._showAnimationName});

src/material/tooltip/tooltip.ts

@@ -52,6 +52,7 @@ import {
   VerticalConnectionPos,
 } from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
+import {MediaMatcher} from '@angular/cdk/layout';
 import {Observable, Subject} from 'rxjs';
 import {_animationsDisabled} from '../core';
 
@@ -190,6 +191,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
   protected _dir = inject(Directionality);
   private _injector = inject(Injector);
   private _viewContainerRef = inject(ViewContainerRef);
+  private _mediaMatcher = inject(MediaMatcher);
   private _animationsDisabled = _animationsDisabled();
   private _defaultOptions = inject<MatTooltipDefaultOptions>(MAT_TOOLTIP_DEFAULT_OPTIONS, {
     optional: true,
@@ -784,7 +786,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
 
     // The mouse events shouldn't be bound on mobile devices, because they can prevent the
     // first tap from firing its click event or can cause the tooltip to open for clicks.
-    if (this._platformSupportsMouseEvents()) {
+    if (!this._isTouchPlatform()) {
       this._passiveListeners.push([
         'mouseenter',
         event => {
@@ -801,8 +803,9 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
 
       this._passiveListeners.push([
         'touchstart',
-        event => {
-          const touch = (event as TouchEvent).targetTouches?.[0];
+        e => {
+          const event = e as TouchEvent & {_isHarnessEvent?: boolean};
+          const touch = event.targetTouches?.[0];
           const origin = touch ? {x: touch.clientX, y: touch.clientY} : undefined;
           // Note that it's important that we don't `preventDefault` here,
           // because it can prevent click events from firing on the element.
@@ -811,11 +814,21 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
             clearTimeout(this._touchstartTimeout);
           }
 
-          const DEFAULT_LONGPRESS_DELAY = 500;
-          this._touchstartTimeout = setTimeout(() => {
+          // Harnesses can run in headless browsers that might be picked up as touch
+          // devices, because they can't hover. If we detect a harness, skip the delay.
+          const showOnTouch = () => {
             this._touchstartTimeout = null;
             this.show(undefined, origin);
-          }, this._defaultOptions?.touchLongPressShowDelay ?? DEFAULT_LONGPRESS_DELAY);
+          };
+
+          if (event._isHarnessEvent) {
+            showOnTouch();
+          } else {
+            this._touchstartTimeout = setTimeout(
+              showOnTouch,
+              this._defaultOptions?.touchLongPressShowDelay ?? 500,
+            );
+          }
         },
       ]);
     }
@@ -830,7 +843,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
     this._pointerExitEventsInitialized = true;
 
     const exitListeners: (readonly [string, EventListenerOrEventListenerObject])[] = [];
-    if (this._platformSupportsMouseEvents()) {
+    if (!this._isTouchPlatform()) {
       exitListeners.push(
         [
           'mouseleave',
@@ -865,8 +878,16 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
     });
   }
 
-  private _platformSupportsMouseEvents() {
-    return !this._platform.IOS && !this._platform.ANDROID;
+  private _isTouchPlatform(): boolean {
+    if (this._platform.IOS || this._platform.ANDROID) {
+      // If we detected iOS or Android, it's definitely supported.
+      return true;
+    } else if (!this._platform.isBrowser) {
+      // If it's not a browser, it's definitely not supported.
+      return false;
+    }
+
+    return this._mediaMatcher.matchMedia('(any-hover: none)').matches;
   }
 
   /** Listener for the `wheel` event on the element. */