title: How to dynamically remove a `md-tooltip` with Angular Material?
body: <p>I have a basic <code>md-button</code> with a <code>md-tooltip</code> inside. Although, I require a way to globally remove all tooltips from my website if the user is on a mobile device.</p>
  
  <pre><code>&lt;md-button class="md-primary md-raised"&gt;
     Hello
     &lt;md-tooltip&gt;This is a buttons tooltip&lt;/md-tooltip&gt;
  &lt;/md-button&gt;
  </code></pre>
  
  <p>After the template is loaded and directives have run, the above gets converted into the following:</p>
  
  <pre><code>&lt;button class="md-primary md-raised md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Hello"&gt;
      &lt;span class="ng-scope"&gt;
         Hello
      &lt;/span&gt;
      &lt;div class="md-ripple-container"&gt;&lt;/div&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>There button element no longer contains the <code>md-tooltip</code>, otherwise I'd simply just remove the tooltip element.</p>
  
  <p>The reason for wanting to do this is because on mobile, the <code>md-tooltip</code> eats the button click. Therefore having the tooltip displayed on the first click and the buttons click action on the second click. This is definitely not a desirable effect.</p>
  
  <p>How can I remove all tooltips from all elements on my page so that my buttons click action is the first click/tap instead of the second?</p>