CODEWITHSUNDEEP
htmlcssangular
queue
queue

Reputation: 309

Rendering html content in matToolTip (Angular)

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

Upvotes: 13

Views: 34926

Answers (3)

Carnaru Valentin
Carnaru Valentin

Reputation: 1855

This don't support for a good reason, security. If you want to add just "<br />", you can use "\n" and for css add:

<p matTooltip="Yes! \n Zorro indeed was here">Zorro was here...</p>

.mdc-tooltip_surface {
    white-space: pre-line;
}

Upvotes: 2

Emeric
Emeric

Reputation: 6895

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:

Upvotes: 7

Gonzalo
Gonzalo

Reputation: 319

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.

Upvotes: 5

Related Questions