Angular 4中md-tooltip在Safari下致输入框无法输入的解决咨询

我之前也踩过Angular Material tooltip在Safari里的这个坑！结合你的代码和常见的兼容性问题，给你几个靠谱的解决办法：

方案1：给Tooltip添加pointer-events: none样式 #

Safari有时候会把tooltip的元素当成可交互区域，遮挡住下方的输入框。我们可以通过CSS强制让tooltip不接收任何鼠标事件：

.mat-tooltip {
  pointer-events: none !important;
}

这样tooltip只会正常显示，但不会干扰输入框的点击和输入操作。

方案2：显式指定Tooltip的触发方式 #

默认的tooltip触发逻辑在Safari里和Chrome的表现不一致，你可以指定仅在鼠标移入时触发tooltip，避免和输入框的焦点/输入事件冲突：

<div class="input-group">
  <input class="form-control" type="number" 
         [(ngModel)]="cons.failPercent" 
         [ngModelOptions]="{ standalone: true}" 
         mdTooltip="Typically valves can be repaired three times before they need to be replaced" 
         mdTooltipPosition="right"
         mdTooltipTrigger="mouseenter"
         autofocus/>
</div>

方案3：手动处理输入框焦点（替代原生autofocus） #

原生autofocus属性在Safari和Tooltip结合时可能存在兼容性问题，你可以用Angular的Renderer2在组件初始化时手动设置焦点：

1. 给输入框添加模板引用变量：

<input #failPercentInput class="form-control" type="number" 
       [(ngModel)]="cons.failPercent" 
       [ngModelOptions]="{ standalone: true}" 
       mdTooltip="Typically valves can be repaired three times before they need to be replaced" 
       mdTooltipPosition="right"/>

2. 在组件类里获取元素并设置焦点：

import { Component, ElementRef, ViewChild, OnInit, Renderer2 } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  @ViewChild('failPercentInput') failPercentInput: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    // 延迟设置焦点，避免和tooltip初始化流程冲突
    setTimeout(() => {
      this.renderer.selectRootElement(this.failPercentInput.nativeElement).focus();
    }, 100);
  }
}

方案4：升级Angular Material版本（如果项目允许） #

Angular 4对应的Material版本比较老旧，后续版本修复了不少Safari的兼容性问题。如果项目架构允许，尝试升级到匹配Angular版本的较新Material包，可能直接解决这个问题。

内容的提问来源于stack exchange，提问作者strypeez