angular 2 material matTooltip multiline

Question

I'm new to Angular 2 Material. What's the preferred way to make a tool tip multi-line?

For example, I might have the following tool tip:

AA BBBBBBBBBB CCCC DDDDD

And, I may want to to have it display in a multi-line format like this:

AA BBBBBBBBBB 
CCCC 
DDDDD

@Jonas Since it's against the Material specs for what you're trying to do and the Angular Material team follows the guidelines as closely as possible, there's no **official** solution for this. — Edric, Dec 30 '17 at 08:29
@Edric I couldn't find the Material specs (in 2020) that says line break on tooltips is a no no. — Tiago B, Dec 15 '20 at 22:23

score 76 · Answer 1 · edited Apr 05 '21 at 13:10

76

First, create a class for your tooltip, to make it break lines on line breaks.

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

Then, add the class to your tooltip and insert line breaks with the Unicode code 

<span 
    matTooltip="First line&#13;Second line"
    matTooltipClass="my-tooltip">
</span>

edited Apr 05 '21 at 13:10

mfluehr

2,054
1
16
24

answered Nov 17 '17 at 12:44

Rodris

2,355
1
15
25

11

why not `matTooltipClass="my-tooltip"` instead of `[matTooltipClass]="'my-tooltip'"` ? – Logan Wlv Nov 27 '18 at 13:23
4

Do you have any idea why it works like this `[matTooltip]="'I am goin crazy here'"` but not if I have a public variable `text = "I am goin crazy here";` and set it like this: `[matTooltip]="text"? The first example makes new lines, the second just prints out the ` `.. – Stefan Falk Aug 28 '19 at 10:54
I would recommend you to open a new question in SO explaining the details. – Rodris Aug 28 '19 at 11:39
5

@displayname , I think the CSS style runs before angular evaluates the variable. I simply use \n on the text in my variable and it worked – velval Feb 05 '20 at 02:17
I didn't know this CSS option, thanks! – Wouter Lievens Apr 29 '22 at 12:54

score 25 · Answer 2 · edited Apr 06 '22 at 12:59

25

You can achieve the same thing without even the need of \n or <br>. Just write your content as it is, if you need it to be multi-lined. For example:

"abc
 abc
 abc"

All you have to do is to add this to your global css:

::ng-deep .mat-tooltip  {
  white-space: pre-line !important;
}

UPDATE 2021

The above solution is pretty old and ::ng-deep is deprecated as pointed out by @bsplosion in the comments.

If you don't want to use the solution of @rodris you can alternatively just edit the class directly. Add this to your global stylesheet:

.mat-tooltip  {
  white-space: pre-line;
}

edited Apr 06 '22 at 12:59

pykereaper

3
3

answered Dec 31 '17 at 10:46

Gopherine

901
11
21

I wouldn't recommend trying to leverage `::ng-deep` for this (or, really, for most things). First, [it's deprecated](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep), and second, it's a bad habit that'll make CSS bug hunts a real pain. In this case, the style should work just fine without `::ng-deep` and `!important` if you just put it in the global stylesheet for your project (whichever one is in your angular.json>architect>build>options>styles setting). – bsplosion Mar 11 '21 at 20:15
Yeah, even back in late 2017 this wasn't recommended practice - check out [this answer](https://stackoverflow.com/a/43586539/2738164) for an example of using global styles instead of `::ng-deep`. Even before that, you could always just apply a linked stylesheet in the index.html which would propagate through all components. – bsplosion Mar 29 '21 at 17:43

score 20 · Answer 3 · answered Sep 04 '18 at 13:22

20

In My Example I am using angular 6, Material Design. My Issue was 'I have array of string' and I have to show it in multiline MatTooltip. I handle the situation and it works for me. Here is code

.mat-tooltip {
  white-space: pre-line;
}

<p matTooltip="{{myArray.join('\n')}}" >...</p>

answered Sep 04 '18 at 13:22

this is the only solution that worked for me (Angular 12). I put the .mat-tooltip style in the global stylesheet. – Urs Meili Mar 16 '22 at 13:17

score 14 · Answer 4 · answered Apr 23 '20 at 14:37

14

none of this worked for me in my project i.e using angular 7,8 I found the solution from
here DEMO

In html

<img src="assets/icons/about.png"  width="15px" height="15px" matTooltip="{{getMoreInformation()}}"  matTooltipClass="test"/>

In ts file

 getMoreInformation(): string {
    return 'Address : Home \n  Tel : Number';// \n represent break line here
    }

in your style.css file(remember project style.css)

.test {
    white-space: pre-line;
  }

Hope it help someone. ps keep coding

answered Apr 23 '20 at 14:37

codingwithtashi

1,431
1
16
25

2

Thanks! With your example I found that \n works when calling a function while works when the toolTip text is in html – Ben Petersen Jun 03 '21 at 16:59
This fixed my exact issue, thank you! – Frank A. Dec 02 '21 at 22:32

score 9 · Answer 5 · answered Nov 10 '20 at 08:54

9

You can simply do:

HTML:

<button matTooltip="AA BBBBBBBBBB 
   CCCC 
   DDDDD">
   Hello world !
</button>

CSS:

::ng-deep .mat-tooltip {
  white-space: pre-line; // Allow line break
}

Result:

answered Nov 10 '20 at 08:54

Emeric

5,155
2
38
43

angular 2 material matTooltip multiline

5 Answers5

Linked