Breaking News: Grepper is joining You.com. Read the official announcement!

mat-tooltip multiline

Banana in Transit answered on July 7, 2022 Popularity 7/10 Helpfulness 4/10

answer mat-tooltip multiline

related mattooltip multiline

mat-tooltip multiline

Comment

// How to set a multiline tooltip in Angular Material:

::ng-deep .my-tooltip {
  white-space: pre-line;
}

/////

/* Note: You need to set matTooltipClass, not a regular class */
<span 
  matTooltipClass="my-tooltip" 
  matTooltip="Imagine there's lots of text here"
  [matTooltipPosition]="'above'">
</span>

Popularity 7/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: multiline whatever

Link to this answer
Share Copy Link

Contributed on Jul 07 2022

Banana in Transit

0 Answers Avg Quality 2/10

Closely Related Answers

mattooltip multiline

Comment

/*Working for Angular Material 13 */

//Add a matTooltipClass
matTooltipClass="custom-class"
matTooltip="foo\nbar\n" | matToolTip="{array.join('\n')}"

//Add the following to the component .scss
::ng-deep {
  .custom-class {
    white-space: pre-line;
  }
}

Popularity 3/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: whatever multiline

Link to this answer
Share Copy Link

Contributed on May 18 2023

Russell Len

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

mat-tooltip multiline

Contents

More Related Answers

mat-tooltip multiline

Closely Related Answers

mattooltip multiline

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.