title: MatTooltip won't be aligned to its object/button in the whole project, how do I align it?
body: <p>I'm building a project with Metronic (downloaded from themeforest). I'm using the angular version of it and I have this style problem where the tooltips have an offset to the left.</p>
  
  <p>Tried to reinstall angular, tooltip, hammerjs, but nothing changed</p>
  
  <p>In pages.module.ts:</p>
  
  <pre><code>import { MatTooltipModule, MatInputModule, ... } from "@angular/material";
  @NgModule({
  declarations: [ ... ],
  imports: [
      ...
      MatTooltipModule,
  
  ],
  providers:[],
  entryComponents:[
      // multiple components for my custom dialogs
  ]
  });
  </code></pre>
  
  <p>When I actually use it:</p>
  
  <pre><code>&lt;button matTooltip="tooltip"&gt;&lt;mat-icon&gt;new&lt;/mat-icon&gt;&lt;/button&gt;
  </code></pre>
  
  <p>I also tried using the <code>matTooltipPosition</code> with all the possible values, but nothing changed.</p>
  
  <p><a href="http://examcopy.altervista.org/screenshot.png" rel="nofollow noreferrer">Link to image</a></p>
  
  <p>As you can see in the image, when I hover the button the actual tooltip is shown way to the left of it, not aligned to the button.*</p>