How to dynamically remove a `md-tooltip` with Angular Material?
<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>