Mat paginator change tooltip position

问题

I am trying to position tooltip of mat-paginator closer to the pagination buttons. Currently, tooltip is too far away, see below:

I tried to update .cdk-overlay-pane and .mat-tooltip-panel classes but didn't work for me. Any points are highly appreciated!

回答1:

Need to go deep inside component

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

回答2:

apply bottom style to mat-tooltip-panel class. It can resolve the issue..and it worked for me

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

回答3:

You can create a custom MatPaginatorIntl and set the labels to empty strings:

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

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

And then you can either add it to your global providers or you can add it to the providers on your component if you want to be more specific.

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

来源：https://stackoverflow.com/questions/52473252/mat-paginator-change-tooltip-position