Change width of angular mat tooltip

Asked

Viewed 636 times

0

I need to increase the width of the angular mat tooltip

Angular Material Tooltip I tried to:

::ng-deep .mat-tooltip {
    padding: 15px;
    font-size: 12px;
}

The padding and font-size has been applied, but I cannot change the tooltip width. I tried to set a fixed value for width, e.g.: 400px! Important or 100%! Important, but both made no difference. I wish there was no line breaking. Does anyone know how to increase?

angular material-design

  • Here putting the width in the hand worked, I did it directly by devtools by the link you passed there as you can see on the link http://prntscr.com/m2n3v5, but here I have no environment to simulate it... My suggestion is that you put .mat-tooltip { max-width: initial;} this will make it as if the text does not break inside the Tooltipe. If it works there tell me that I make an answer with more details.

1 answer

0


Using the example given in the documentation, just add the width.

HTML

    mat-form-field class="example-user-input">
  <mat-select placeholder="Tooltip position" [formControl]="position">
    <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
      {{positionOption}}
    </mat-option>
  </mat-select>
</mat-form-field>

<button mat-raised-button
        matTooltip="Info about the action"
        [matTooltipPosition]="position.value"
        aria-label="Button that displays a tooltip in various positions">
  Action
</button>

CSS

.example-user-input {
  margin-right: 8px;
}

::ng-deep .mat-tooltip {
    padding: 15px;
    font-size: 12px;
    width: 500px; //bastou adicionar isso
}

Browser other questions tagged angular material-design

You are not signed in. Login or sign up in order to post.