Set Font Size of Angular Material Tooltip

Set font size of Angular Material Tooltip

You can fix this by adding a .mat-tooltip css declaration in you main styles file and change the font size there. You need to set !important on the font size otherwise it won't show up.

How can I update the font size and background color of my Tooltip and make its icon smaller?

Try this

::ng-deep .mat-tooltip {
    background-color: transparent;
    font-size: 12px;
}

You can set !important if not working.

Hope useful

Angular2 Materials mdToolTip Font size

How about trying !important

.mat-tooltip {
background-color: red !important;
font-size: 50px !important;
}

How to style material tooltip Angular 7

Add your style to global styles, material tooltip as well as dialogs are rendered outside of app-root. Your style dont work even with important becouse hierarchy of your rendered css is probably too low.

If you have external css in your assets folder and configured angular.json, then your style should be there.

Angular Material: changing font size of input clips text

If you want to change font-size for mat-form-field, you should apply the style to the mat-form-field element, not the input element. If you don't, certain parts of the form field may not respond properly (style wise). You should also make sure you set line-height appropriately for the same reason.

If you plan to adhere to material design, then you should be using the utilities and creating your style using theming/typography with mat-typography-level-to-styles and one of the Material Design specified typography levels. This should be done with the typography utilities but you can do it manually. See https://material.angular.io/guide/typography for details.

For example, 24px is the font size for what Angular Material calls headline (H5 in material design - not an H5 element) so your style should implement the appropriate headline specification (according to Angular Material's implementation of H5):

.input-headline {
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
}

Angular Material has convenience style classes that do this for you. For headline it is mat-headline so you could easily just do:

<mat-form-field class="mat-headline">

Note that 28px is not a material design specified font level: https://material.io/design/typography/the-type-system.html#type-scale.

Mattooltip: How can I make the box fit the text?

Just set the max-width to unset. To do so, define a global CSS class as follows:

.my-custom-tooltip {
  max-width: unset !important;
}

Then pass the class name to the tooltip:

<button mat-raised-button
        matTooltip="This Infotext is displayed one line if possible. Just a little more text for demo!"
        matTooltipClass="my-custom-tooltip">
  Action
</button>

Also as @rinktacular mentioned, try not to use ng::deep.

Working Stackblitz example: https://stackblitz.com/edit/angular-qkh4cl

Mysql select where not in table

I use queries in the format of your second example. A join is usually more scalable than a correlated subquery.

To customize Angular material mattooltip and format data to show in tooltip

I think, i fixed it

::ng-deep .mat-tooltip {
 font-size: 15px;
 white-space: pre-wrap;
 color: gray !important;
 background-color: rgba(255, 255, 255, .9);
 border:1px solid gray;
 max-width: unset !important;
}

https://stackblitz.com/edit/angular-mat-tooltip-g28f5w?embed=1&file=app/tooltip-overview-example.css
--Update--

Add matTooltipClass

<span [matTooltipClass]="{ 'tool-tip': true }" matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">{{row.Alert}}</span> 

then change css file like 

.tool-tip {
     font-size: 15px;
    white-space: pre-wrap;
    color: gray !important;
    background-color: rgba(255, 255, 255, .9) !important;
    border:1px solid gray;
    max-width: unset !important;

    }

For a button

 <button mat-raised-button
    [matTooltipClass]="{ 'tool-tip': true }" matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}"
    aria-label="Button that displays a tooltip when focused or hovered over">

Action

Set position of Angular Material Tooltip

From https://material.angular.io/components/tooltip/overview : "The tooltip will be displayed below the element but this can be configured using the matTooltipPosition input. The tooltip can be displayed above, below, left, or right of the element. By default the position will be below. If the tooltip should switch left/right positions in an RTL layout direction, then the positions before and after should be used instead of left and right, respectively."

So this will render the tooltip to the left of your rows:

<mat-row
  *matRowDef="let row; columns: mGridColumns;"
  (click)="onRowClick(mGridDataSource, row)"
  [matTooltip]="row.tooltipText"  [matTooltipPosition]="'left'">
</mat-row>

---

Related Topics