bug(TOOLTIP): Tooltip displays immediately on touch - desktop only

[thw0rted]

Reproduction

Steps to reproduce:

1. Visit Tooltip docs on a touchscreen laptop with a pointer input (mouse/touchpad)
2. Touch the first example button

Expected Behavior

From the tooltip spec:

A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip as long as the user long-presses or hovers over the element.

Actual Behavior

The tip appears immediately and remains there until you touch somewhere else or move the mouse/touchpad, if you have one.

Notes

I think this is a classic "sticky hover" situation, which has been an issue for a really long time. I don't have a particular solution in mind, but I don't think we can ignore this because it conflicts with autocomplete.

I'm getting an error trying to open the Autocomplete examples in Stackblitz to set up a repro, but it's probably a transient thing (passed through some kind of Cloudflare error message) so if it's working for you, just edit any of the examples and add a tooltip. When you touch the input, both the tooltip and the dropdown appear at the same time. At least the tooltip is behind the dropdown.

As an aside, I just noticed that on mobile, the autocomplete dropdown opens on long-press. I don't think Autocomplete has a spec but this seems wrong to me -- I would expect it to open on tap instead, with a tooltip displayed on long-press, and I guess a context menu otherwise?

Environment

• Angular: all versions I tested, back to v8
• CDK/Material: same
• Browser(s): Latest Chrome, Firefox, Edgium.
• Operating System (e.g. Windows, macOS, Ubuntu): Win10

[crisbeto]

It's probably because we only bind touch events on non-iOS and non-Android devices since detecting these hybrid mouse/touch devices can be tricky (see https://github.com/angular/components/blob/master/src/material/tooltip/tooltip.ts#L675). That being said, we may be able to use pointer events instead.