bug(MatTooltip): Can't scroll if target element has matTooltip

[ManicardiFrancesco]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

According to Issue 4892, this bug should've been fixed in Angular 11+

Description

Scrolling on a touch device doesn't work if the target of the gesture is an element using matTooltip.
This is apparently a regression as people mentioned it being fixed in angular 11+:
#4892

Tagging @wagnermaciel @crisbeto and @jelbourn as they commented on the previous issue.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-nnqsnt?file=src%2Fmain.html
Steps to reproduce:

1. Open the stackblitz link with a touch enabled device (I tested with my Android phone and Firefox browser)
2. Try scrolling the element - it will not scroll if you target the "This will not scroll with touch" text.

I also included a CSS workaround which appears to be working but shouldn't be necessary.

Expected Behavior

Scrolling behavior should not be affected by the presence or absence of a mat tooltip.

Actual Behavior

Scrolling behavior is disabled by targeting a mat tooltip element.

Environment

• Angular:
• Angular CLI: 19.0.0
  Node: 18.20.3
  Package Manager: npm 10.2.3
  OS: linux x64

Angular: 19.0.0
... animations, build, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, router

Package Version

@angular-devkit/architect 0.1900.0
@angular-devkit/core 19.0.0
@angular-devkit/schematics 19.0.0
@schematics/angular 19.0.0
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0

• CDK/Material: "@angular/material": "^19"

• Browser(s): Firefox

• Operating System (e.g. Windows, macOS, Ubuntu): Android

[ManicardiFrancesco]

Some additional info I gathered in the past hour:
The workaround I showed in the StackBlitz works by setting this css rule on the tooltip trigger element:
touch-action: auto !important;

I don't know why this works since the initial value of touch-action is supposed to be auto anyway according to the MDN web docs - I checked the elements on my repro with inspect element and i confirmed that there is no touch action rule set on them.
Note that the !important is required - the css rule by itself doesn't seem to fix the issue for some reason.
I'm really confused by this behavior as chrome devtools show that the value is applied to the element even without using !important

In my Stackblitz repo I also tried playing around with the matTooltipTouchGestures - but no allowed value seem to achieve the desired effect (The tooltip shows correctly if you long press the element but you can also scroll if you want)

[crisbeto]

It's because the tooltip uses a long press gesture on touch devices which can interfere with scrolling. You can use the matTooltipTouchGestures input to configure the behavior. There's more information in the docs: https://material.angular.io/components/tooltip/api

[ManicardiFrancesco]

Thank you for your time and for providing clarity on this @crisbeto!

I appreciate the quick response.

Could you elaborate on why scrolling and opening the tooltip can't work together by default?
What does it mean exactly when you say "it interferes" with scrolling?

With the workaround I implemented (touch-action: auto !important;), the scrolling and tooltip both work.
Could this behavior possibly be the default setting, or is there some edge case I'm missing?

I’ve experimented with the matTooltipTouchGestures input, but none of the accepted values achieve the desired behavior of allowing both scrolling and the tooltip to work simultaneously (this can be verified on my stackblitz)
Would it be possible to introduce a new experimental value for this input that enables both functionalities (even if it’s non-default)?

This limitation is currently preventing me from effectively using mat-tooltip in mat-table cells, as it blocks users from scrolling through the table on mobile devices.