问题描述
我正在用 Metronic 构建一个项目(从 themeforest 下载).我正在使用它的 angular 版本,但我遇到了这种样式问题,即工具提示向左偏移.
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.
尝试重新安装angular、tooltip、hammerjs,但没有任何改变
Tried to reinstall angular, tooltip, hammerjs, but nothing changed
在 pages.module.ts 中:
In 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
与所有可能的值一起使用,但没有任何改变.
I also tried using the matTooltipPosition
with all the possible values, but nothing changed.
正如您在图片中看到的,当我将鼠标悬停在按钮上时,实际的工具提示会显示在按钮的左侧,而不是与按钮对齐.*
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.*
推荐答案
我发现我设置了
.cdk-overlay-pane{
min-width:40vw;
}
在我的 styles.scss
中使每个对话框都足够大,但工具提示也使用相同的类,因此使该 CSS 指令更具体或删除它可以解决问题.
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.
这篇关于MatTooltip 不会在整个项目中与其对象/按钮对齐,我该如何对齐它?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!