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

Question

I want to show the data in tooltip in json format as attached in the pic.

I am able to load the data in tooltip(but not the way it is formatted in the picture attached).

<ng-container matColumnDef="Alert">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Alert </th>
                <td mat-cell *matCellDef="let row">
                        <span matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">{{row.Alert}}</span> 
                </td>
 </ng-container>

Stackblitz link. The html and ts code is present in stackblitz link.

https://stackblitz.com/edit/angular-mat-tooltip-xngsaq?file=app%2Ftooltip-overview-example.ts

In the tooltip Conditionals, Offset, Alert needs to be shown as in the attached pic, when we hover on first column.

#EDIT1 I also have tried basic html tooltip if anyone can suggest formatting data on this that would also work for me

https://stackblitz.com/edit/angular-mat-tooltip-ik3f8e?file=app%2Ftooltip-overview-example.css

For reference one of the so links pretty-print JSON using JavaScript

You mean like this?? https://stackblitz.com/edit/angular-mat-tooltip-ytcdaj — Maniraj Murugan, Mar 13 '20 at 05:23
@ManirajMurugan I am able to show the data in the format you have done in your stackblitz link but want to match with the attached picture — Enthu, Mar 13 '20 at 05:25
@errorau I have updated the stackblitz , yes when we hover on first column the data is coming up in tooltip but not formatted as in the attcahed pic , thanks — Enthu, Mar 13 '20 at 10:51
Showing such huge text in tooltip is not a good idea. instead show it in dialog where you can customize the way you want. — Allabakash, Mar 13 '20 at 11:14
@Allabakash ,Sorry but that is what the requirement is :) , it would be great if you could help in the formatting , it might be looking more tight in stackblitz link :) — Enthu, Mar 13 '20 at 11:17

errorau · Accepted Answer · 2020-03-14T07:02:19.620

8

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

edited Mar 14 '20 at 07:02

answered Mar 13 '20 at 11:30

errorau

2,121
1
14
38

thanks , I have updated the following link using normal html tooltip , https://stackblitz.com/edit/angular-mat-tooltip-deyuyp?file=app%2Ftooltip-overview-example.html , can you suggest on modifying this if possible – Enthu Mar 13 '20 at 12:02
@Enthu I update answer if you open encapsulation line it will work – errorau Mar 14 '20 at 06:46
Thanks a lot, I have accepted I clicked on bounty but it will allow only after 6hrs , anyways I'll do that, one more part if you can help how can place a button inisde the tooltip and which upon being clicked opnes a material dialog – Enthu Mar 14 '20 at 06:51
Nice :) https://ybin.me/p/835393b933c929fd#KIwXUyx/1Xkvge8GcP7rQ8OP2BQuZHC+VyuXVm+tEeU= here for a button use this tooltip – errorau Mar 14 '20 at 07:02

score 0 · Answer 2 · answered Mar 13 '20 at 12:22

0

try with white-space: pre-wrap;

::ng-deep .mat-tooltip {
   font-size: 15px;
  background: green;
  white-space: pre-wrap;
}

answered Mar 13 '20 at 12:22

Lalji Tadhani

14,041
3
23
40

thanks , but I need to format the data as well(same as in the attached picture) :) , now I have started using normal html tooltip , https://stackblitz.com/edit/angular-mat-tooltip-vsern6?file=app/tooltip-overview-example.html , if you can suggest to format data – Enthu Mar 13 '20 at 12:23
you can try with this `white-space: pre;` – Lalji Tadhani Mar 13 '20 at 12:27
thanks, white-space : pre works but not in the way I have attached in the picture , :) , can we format exactly like we have in the picture – Enthu Mar 13 '20 at 12:30

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

2 Answers2