MatTooltip won't be aligned to its object/button in the whole project, how do I align it?

Question

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.

Tried to reinstall angular, tooltip, hammerjs, but nothing changed

In pages.module.ts:

import { MatTooltipModule, MatInputModule, ... } from "@angular/material";
@NgModule({
declarations: [ ... ],
imports: [
    ...
    MatTooltipModule,

],
providers:[],
entryComponents:[
    // multiple components for my custom dialogs
]
});

When I actually use it:

<button matTooltip="tooltip"><mat-icon>new</mat-icon></button>

I also tried using the matTooltipPosition with all the possible values, but nothing changed.

Link to image

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.*

Answer 1

I figured out that I set

.cdk-overlay-pane{
    min-width:40vw;
}

in my styles.scss to make every dialog box big enough, but the same class was used by the tooltips as well, so making that CSS directive more specific or just deleting it solves the problem.