MatTooltip不会在整个项目中与其对象/按钮对齐，该如何对齐？

Question

我正在用Metronic构建一个项目（从themeforest下载）。我正在使用它的角度版本，但我遇到了这种样式问题，即工具提示的左侧偏移。

试图重新安装angular，tooltip，hammerjs，但未做任何更改

在pages.module.ts中：

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

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

当我实际使用它时：

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

我还尝试将matTooltipPosition与所有可能的值一起使用，但没有任何改变。

Link to image

您可以在图像中看到，当我将鼠标悬停在按钮上时，实际的工具提示将显示在其左侧，而不是与按钮对齐。*

Answer 1

您可以尝试通过matTooltip设置matTooltipPosition="below"的位置

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

所有职位的官方文件： https://material.angular.io/components/tooltip/overview#positioning

Answer 2

我发现我已经设定

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

在我的styles.scss中，使每个对话框足够大，但是工具提示也使用了相同的类，因此使CSS指令更具体或删除它就可以解决问题。