Tooltip : render HTML

[Robouste]

Hi,

Is there a way to render HTML inside the tooltip ? In my case, I would like to render some <br/> tags but it's not working.

How can I render the br ?

[bebelz]

HTML is not supported in tooltips for now but you can replace <br/> with \n and override your css with :

.mat-tooltip {
  white-space: pre-line;
}

[Robouste]

I didn't know that css rule, it did the trick.

Thank you :)

[willshowell]

@Robouste for completeness:

1. HTML won't be supported in tooltips
2. If you don't want to add css to all tooltips in your application, you can customize them individually with mdTooltipClass

[mackelito]

@willshowell I understand that it will not be supported due to Material Design Spec.
But as a note.. the spec are guidelines and not meant to be enforced ;)

I have no need for this feature but I do understand that there are requests for it as it is pretty common in other frameworks

[Robouste]

Yes it could be pretty useful in some cases.

Thank for the completness

[DavidVotrubec]

Seems that the directive for css class is now matTooltipClass

[chriszrc]

We can even get bullets in there with utf8 codes:

https://www.fileformat.info/info/unicode/char/2022/index.htm

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}