matTooltip 在 iOS (Safari) 上无法正常工作

Question

我正在使用来自Angular Material 的Tooltip，但工具提示无法在 iOS (Safari) 上正确显示。这是我遇到的行为：

• 装有 iOS 12 的 iPhone：长按按钮会显示工具提示，但也会执行 click 事件
• 装有 iOS 13 的 iPad：长按时根本没有工具提示
• 装有 iOS 14 的 iPhone：长按时会显示工具提示，但会出现弹出菜单（剪切、复制、粘贴...）并选择下面的文本

在 Android 上，一切都按预期工作。在我看来，matTooltip 根本无法在 iOS 上运行。这是我的设置：

Angular CLI：8.3.29
角度：8.2.14
@angular/cdk 8.2.3
@角/材料8.2.3

我的示例代码基于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 { }

我尝试应用特殊的 CSS（见上文），但该 CSS 必须以不同的方式应用才能生效。但是元素仍然存在问题，无法选择（例如在表单中）。

这是一个错误还是我遗漏了什么？

Answer 1

Angular material docs on tooltip（参见 api 部分 -> Directives -> MatToolTip -> properties -> TouchGestures），实际上对这种行为做了一些说明：

工具提示应如何处理触摸手势。在触摸设备上，工具提示指令使用长按手势来显示和隐藏，但它可能与本机浏览器手势冲突。为了解决这个冲突，Angular Material 禁用了触发器上的原生手势，但这可能不适用于特定元素（例如输入和可拖动元素）。此选项的不同值配置触摸事件处理如下：

• auto - 为所有元素启用触摸手势，但尽量避免 与特定元素上的本机浏览器手势冲突。在 特别是，它允许在输入和文本区域上进行文本选择，并且 保留本地浏览器拖动标记为的元素 可拖动。
• on - 为所有元素启用触摸手势并禁用 本机浏览器手势无一例外。
• off - 禁用触摸 手势。请注意，这将阻止工具提示显示 触摸设备。

基于此，可以使用您的示例代码尝试类似的操作：

<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>