I need to increase the width of the tooltip angular tooltip
Angular Material Tooltip I tried:
::ng-deep .mat-tooltip {
padding: 15px;
font-size: 12px;
}
The padding and font-size has been applied, but I can not change the width of the tooltip. I tried to set a fixed value for width, eg 400px! Important or 100%! Important, but they both made no difference. I wish there were no line breaks. Does anyone know how to increase?
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
}