feat(Tooltip): Disable tooltip if media query is any-hover: none

[wein2011]

Feature Description

On iPads and similar devices the tooltip will appear and remain when clicking a button with associated tooltip.

See #25287

This is caused by the desktop vs. mobile mode for iPads.

Based on the adoption of the new W3 standards, it might now be possible to disable the tooltip if there is no hover-capable device available instead of relying on the mode.

if (window.matchMedia('(any-hover: none)').matches)

This would eliminate the tooltip issue on iPads.

However, you might still want to keep the tooltip if a user performs a long click.

Can I use @media: any-hover shows adoption by all browsers (besides IE).

Use Case

Usability improvement for iPads:

User will not be required to reload the site with mobile mode for it to function correctly.

[crisbeto]

This sounds interesting although I would've expected it to be caught by this check: https://github.com/angular/components/blob/main/src/material/tooltip/tooltip.ts#L859

[wein2011]

The user agent check used in tooltip.ts only works in mobile mode. Unfortunately, the default mode for iPad is now desktop mode.

The following are the user agents for an 11-inch Apple iPad (11th Generation) with the latest iPadOS version 26.1:

Default user agent = desktop mode:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15

User agent when loading page in mobile mode (special user step required):

Mozilla/5.0 (iPad; CPU OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Mobile/15E148 Safari/604.1

As you can see there is no "iPad" in the default user agent. This changed in iPadOS around version 13.

An alternative approach to the media query approach would be to use a combination of navigator.platform and userAgent as described in Detecting iOS.