Rendering html content in matToolTip (Angular)

Question

I want to bold some contents in the popup. But is not interpreted instead is being displayed among the content

Is there any other way, leaving matToolTip to provide popup over hover in Angular

 <button [matTooltip]="help|translate"  type="button"  mat-button class="button-save" [disabled]="!isInfoAvailable">
          <mat-icon>help_outline</mat-icon>
        </button>

Expected output

firstname mike

lastname ross

Actual output

<b>firstname <\b> mike <\n>
<b>lastname <\b> ross

Answer 1

If you need simple customization (changing background-color, color, font-size...) for the whole tooltip you can read this post otherwise you can read this answer ⬇️

---

A similar post already exists: Angular 2 Material tooltip with HTML content in angular

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)

Answer 2

I think native Angular Material Tooltips don't allow HTML code, so I suggest you to use an other provider for the Tooltips, there are a lot of those who allows HTML code like ng-bootstrap or tippy.js

I personally suggest you to use Tippy.js, here's the link where you can see how use HTML code on it.

https://atomiks.github.io/tippyjs/#html-content

Hope it helps you.