垫子分页器更换工具提示位置

Question

我正在尝试将mat-paginator的工具提示更靠近分页按钮。目前，工具提示距离太远，请参见下文：

我尝试更新.cdk-overlay-pane和.mat-tooltip-panel类，但对我没有用。任何观点都受​​到高度赞赏！

Answer 1

需要深入了解组件

::ng-deep body .cdk-overlay-container {
    .mat-tooltip {
        top: 104px;
    }
}

Answer 2

您可以创建自定义的MatPaginatorIntl并将标签设置为空字符串：

import { MatPaginatorIntl } from '@angular/material';

export class MatPaginatorHideLabels extends MatPaginatorIntl {
   itemsPerPageLabel = '';
   nextPageLabel     = '';
   previousPageLabel = '';
}

然后，您可以将其添加到全局提供程序中，也可以将其添加到组件上的提供程序中。

@Component({
    providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorHideLabels }]
})

Answer 3

将底部样式应用于mat-tooltip-panel类。它可以解决问题，并且对我有用

::ng-deep body .cdk-overlay-container {
  .mat-tooltip-panel {
    bottom: 100px !important;
  }
}