title: matTooltip not working correctly on iOS (Safari)
body: <p>I'm using the <code>Tooltip</code> from <code>Angular Material</code> and the tooltip doesn't display correctly on iOS (Safari). This is the behavior I experience:</p>
  <ul>
  <li>iPhone with iOS 12: long tap on the button shows the tooltip, but also executes the <code>click</code> event</li>
  <li>iPad with iOS 13: no tooltip at all on long tap</li>
  <li>iPhone with iOS 14: tooltip is shown on long tap, but the popup menu (cut, copy, paste, ...) appears and a text below is selected</li>
  </ul>
  <p>On Android everything is working as expected. Seems to me that the <code>matTooltip</code> is not really working on iOS at all. This is my setup:</p>
  <p>Angular CLI: 8.3.29<br />
  Angular: 8.2.14<br />
  @angular/cdk 8.2.3<br />
  @angular/material 8.2.3</p>
  <p>My sample code is based on <a href="https://material.angular.io/components/tooltip/overview" rel="nofollow noreferrer">this here</a>:</p>
  <p><strong>app.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;button mat-raised-button
          matTooltip=&quot;Info about the action&quot;
          aria-label=&quot;Button that displays a tooltip when focused or hovered over&quot;
          (click)=&quot;clickEvent()&quot;&gt;
    Action
  &lt;/button&gt;
  </code></pre>
  <p><strong>app.component.css:</strong></p>
  <pre class="lang-css prettyprint-override"><code>* {
      -webkit-touch-callout: none;
      -webkit-user-select: none; /* Disable selection/copy in UIWebView */
  }
  </code></pre>
  <p><strong>app.component.ts:</strong></p>
  <pre class="lang-ts prettyprint-override"><code>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');
    }
  }
  </code></pre>
  <p><strong>app.module.ts:</strong></p>
  <pre class="lang-ts prettyprint-override"><code>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 { }
  </code></pre>
  <p>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).</p>
  <p>Is this a bug or am I missing something?</p>