Angular 2 Material tooltip with HTML content in angular

Question

I am trying to bind the HTML strings into angular 2 tool tip. But it's rendering as HTML it showing as a plain string. Is there any way to do render string as an HTML.

Here is my code:

In View:

 <span class="icon-status" mdTooltip="{{value.status}}"></span>

Component:

value.status = this.sanitizer.bypassSecurityTrustHtml(this.getStatusTemplate(value.status));


  getStatusTemplate(status: IIconStatus): string{
let HTML =`
  <div>Event Title</div>
  <div class="">
    <table>
      <thead>
        <th>User</th>
        <th>User</th>
        <th>User</th>
        <th>User</th>
      </thead>
    </table>
  </div>
`;
return HTML;}

Thanks in advance.

Velizar Andreev Kitanov · Accepted Answer · 2018-01-10 15:30:11Z

24

Bad news for us: HTML is not supported in angular material tooltips and for now, they don't have intentions to support it. Here more info.

answered Jan 10, 2018 at 15:30

Velizar Andreev Kitanov

4695 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Igor Magera · Accepted Answer · 2020-09-09 19:23:47Z

14

It's not well tested, but I did it by defining setter for "message" property on TooltipComponent(app.component.ts)

Object.defineProperty(TooltipComponent.prototype, 'message', {
   set(v: any) {
       const el = document.querySelectorAll('.mat-tooltip');

       if (el) {
           el[el.length - 1].innerHTML = v;
       }
   },
});

html

<div [matTooltipClass]="'right'"
     [matTooltip]="aboveTemplate"
     matTooltipPosition="right">
    Right
</div>

ts

aboveTemplate = `<div class="color-red">Top Template<button style="background: white; color: black">Press me</button></div>`;

result

edited Sep 9, 2020 at 19:23

answered Sep 9, 2020 at 19:16

Igor Magera

1562 silver badges6 bronze badges

Comments

Emeric · Accepted Answer · 2020-11-10 09:21:02Z

8

What you are looking for is a Popover. And as said, it doesn't exist now and it's not possible with tooltips.

Answer from @jelbourn, Angular member team:

When designing the tooltip we deliberately decided not to support this. The Material Design spec is rather prescriptive about only text appearing in tooltips. Rich content also presents a challenge for a11y.

Source: https://github.com/angular/components/issues/5440#issuecomment-313740211

You can find the feature request for popover here.

Until an official release from Material team you can use an alternative. Here are some examples:

https://github.com/joejordanbrown/popover (documentation here)
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover (using Material Menu)
https://ng.ant.design/components/popover/en (ng-zorro lib)

Edit: If you need simple customization (changing background-color, color, font-size...) for the whole tooltip you can read this post.

edited Nov 10, 2020 at 9:21

answered Nov 10, 2020 at 9:12

Emeric

6,9752 gold badges50 silver badges58 bronze badges

1 Comment

Marcin Gołębski Over a year ago

Just simple example how to use Popover with template:

html <ng-template #popupContent><b>Your</b> popup here!</ng-template>  <button [ngbPopover]="popupContent">test</button>

Karen Sarmiento · Accepted Answer · 2021-08-04 13:59:04Z

4

I believe what you want is CDK Overlay:

https://material.angular.io/cdk/overlay/overview

There are some examples there.

answered Aug 4, 2021 at 13:59

Karen Sarmiento

8510 bronze badges

Comments

Wildhammer · Accepted Answer · 2020-05-21 15:59:16Z

0

Material, as opposed to bootstrap, does not have anything like a popover (it has tooltip which is just text, no HTML). I think based on the guides for this use-case you are supposed to use a dialog instead.

answered May 21, 2020 at 15:59

Wildhammer

2,2451 gold badge30 silver badges37 bronze badges

Comments

Lợi · Accepted Answer · 2022-04-20 10:00:41Z

0

How to test passed it by jest?

Object.defineProperty(TooltipComponent.prototype, 'message', {
   set(v: any) {
       const el = document.querySelectorAll('.mat-tooltip');

       if (el) {
           el[el.length - 1].innerHTML = v;
       }
   },
});

answered Apr 20, 2022 at 10:00

Lợi

1

Collectives™ on Stack Overflow

Angular 2 Material tooltip with HTML content in angular

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest