title: Show mdTooltip until clicked, hide when clicked again
body: <p>I'm trying to disable the mouse-hover effect and trigger mdTooltip on click and disable it on clicking again. Is it possible to do that? I thought the .toogle() method would be the right tool for that unfortunately it works the opposite way.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="text-align: center;"&gt;
     &lt;span matTooltip="Tooltip!" #tooltip="matTooltip" (click)="tooltip.toggle()"&gt;Test&lt;/span&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>