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.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip as long as the user long-presses or hovers over the element.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With