bug(Tooltip): Prevents touch scrolling

[peterjosling]

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

No response

Description

Duplicate of (closed) #4892

MatTooltip triggers with matTooltipTouchGestures set to auto (default) or on break page scrolling on touch devices. When set to either of these values the directive sets touch-action: none on the trigger, which breaks native page scrolling.

On a page with many tooltip triggers (e.g. dense links) it can be difficult to scroll the page at all.

Setting matTooltipTouchGestures to off fixes scrolling, but makes tooltips inaccessible on touch devices.

Reproduction

Reproduction taken from #4892 (comment)

Steps to reproduce:

1. Open https://stackblitz.com/edit/angular-ylctyk on a touch device (phone, touch laptop) in Chrome
2. Scroll the page by initiating a touch on the white background
3. Attempt to scroll the page by initiating a touch on the black box

Expected Behavior

Page scrolls

Actual Behavior

Page does not scroll

Environment

• Angular: Latest Google-internal version
• CDK/Material: Latest Google-internal version
• Browser(s): Chrome 104
• Operating System (e.g. Windows, macOS, Ubuntu): Android

[biandtlp]

same issue also here, at the moment I fixed with a temporary workaround:

.mat-tooltip-trigger {
touch-action: auto !important;
user-select: auto !important;
-webkit-user-drag: auto !important;
}

[dcaslin]

I wonder if this is related to #4942

TL;DR disableTooltipInteractivity = true in the provider like this:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'foo-bar',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.scss'],
  providers: [
    {
      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
      useValue: {
        disableTooltipInteractivity: true
      },
    }
  ],
})

[Totati]

This is quite annoying. I've been looking at the material.angular.io docs from my mobile, and I kept starting to scroll from one of the example-viewer icon buttons, but of course I was not scrolling. (The reason)

[martinboue]

Still present in 18.1.0. It's a blocking issue if you have a list of elements and they all have a tooltip, you can't scroll at all.

Updated work-around for 18.1.0:

.mat-mdc-tooltip-trigger {
	touch-action: auto !important;
	-webkit-user-drag: auto !important;
}

And you can still see tooltip on touch devices.

[Ionaru]

Also ran into this issue today, here's a video demonstrating the bug, made on https://material.angular.io/components/tooltip/overview:

Screen_Recording_20241101_030556_Edge.mp4

The workaround posted by @martinboue works, but I did not need to change -webkit-user-drag for the correct scrolling behaviour to return.

.mat-mdc-tooltip-trigger {
	touch-action: auto !important;
}

Changing the tooltip options as suggested by @dcaslin did not work for me.