matTooltip not working correctly on iOS (Safari)

Question

I'm using the Tooltip from Angular Material and the tooltip doesn't display correctly on iOS (Safari). This is the behavior I experience:

• iPhone with iOS 12: long tap on the button shows the tooltip, but also executes the click event
• iPad with iOS 13: no tooltip at all on long tap
• iPhone with iOS 14: tooltip is shown on long tap, but the popup menu (cut, copy, paste, ...) appears and a text below is selected

On Android everything is working as expected. Seems to me that the matTooltip is not really working on iOS at all. This is my setup:

Angular CLI: 8.3.29
Angular: 8.2.14
@angular/cdk 8.2.3
@angular/material 8.2.3

My sample code is based on this here:

app.component.html

<button mat-raised-button
        matTooltip="Info about the action"
        aria-label="Button that displays a tooltip when focused or hovered over"
        (click)="clickEvent()">
  Action
</button>

app.component.css:

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}

app.component.ts:

import { Component } from '@angular/core';
import {MatDialog, MatDialogConfig} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tooltip';

  constructor(private dialog: MatDialog) {}

  clickEvent(){
    window.alert('clicked');
  }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NoopAnimationsModule,
    MatTooltipModule,
    MatButtonModule,
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I tried to apply special CSS (see above), but that CSS must be applied in the different way to take effect. But still there are problems with elements, which are not selectable (e.g. in a form).

Is this a bug or am I missing something?

Answer 1

Angular material docs on tooltip (see the api section -> Directives -> MatToolTip -> properties -> TouchGestures), actually specifies a bit on this behavior:

How touch gestures should be handled by the tooltip. On touch devices the tooltip directive uses a long press gesture to show and hide, however it can conflict with the native browser gestures. To work around the conflict, Angular Material disables native gestures on the trigger, but that might not be desirable on particular elements (e.g. inputs and draggable elements). The different values for this option configure the touch event handling as follows:

• auto - Enables touch gestures for all elements, but tries to avoid conflicts with native browser gestures on particular elements. In particular, it allows text selection on inputs and textareas, and preserves the native browser dragging on elements marked as draggable.
• on - Enables touch gestures for all elements and disables native browser gestures with no exceptions.
• off - Disables touch gestures. Note that this will prevent the tooltip from showing on touch devices.

Based on this, something like this could be tried with your sample code:

<button mat-raised-button #tooltip="matTooltip"
        matTooltip='Info about&#13;the action'
        matTooltipPosition="right"
        matTooltipClass="allow-cr"
        aria-tooltip="Button that displays and hides a tooltip triggered by other buttons"
        matTooltipTouchGestures="on">
  Action
</button>