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 91 · Answer 1 · edited Apr 05 '21 at 13:10

91

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,832
2
23
31

answered Nov 17 '17 at 12:44

Rodris

2,603
1
17
25

12

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

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
7

@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
1

Doesn't work for me using the [matTooltip] attribute in angular 14 :-( – Kieran Ryan Nov 24 '22 at 09:57
I needed to add the css to a global file. In the css of the component it did not work. – Heiner Apr 12 '23 at 13:45

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

34

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

119
5

answered Dec 31 '17 at 10:46

Gopherine

1,021
12
24

1

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
Couldn't find a reference to ng-deep from your link @bsplosion – Kieran Ryan Nov 24 '22 at 09:53
@KieranRyan I just tried the link and it still goes straight to the deprecation notes about it for me. As a note, [Chrome also has published guidelines on how they're handling shadow-piercing descendants now](https://chromestatus.com/feature/6750456638341120) (September 2022). – bsplosion Dec 13 '22 at 22:32

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

22

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 18 · Answer 4 · answered Apr 23 '20 at 14:37

18

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

Kunchok Tashi

2,413
1
22
30

3

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! – WTFranklin Dec 02 '21 at 22:32

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

13

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

6,315
2
41
54

is ::ng-deep depricated? as mentioned in the above answeres? – Abdul Aug 02 '22 at 07:40
@Abdul Most of users use `ng-deep`, while it's written as deprecated the Angular team will maintain it for sure as users need it. The example I wrote is for a component. You can avoid the use of `ng-deep` by using a global style (`styles.css`) or `ViewEncapsulation.NONE`. – Emeric Aug 02 '22 at 18:20

André · Answer 6 · 2023-05-16T18:18:16.347

I'm using Angular 14 and neither of the answers worked for me right away.
First I added a class to the mat-tooltip:

<mat-icon
  [matTooltip]="tooltip"
  matTooltipClass="tooltip-class"
</mat-icon>

I also needed to add ::ng-deep to the css (sass in my case):

::ng-deep .tooltip-class
  white-space: pre-line

The Unicode line break  also didn't work. Since I'm using string template a line break in the .ts file worked:

const tootltipText = `${strings.method}: ${strings.note}
                      ${strings.reason}: ${strings.snapshot}`

I also tested adding \n and it works both with regular strings and string tamplates:

const tootltipText = 'line\nbreak\nworks'

angular 2 material matTooltip multiline

6 Answers6

Linked