I have encountered an issue while trying to display HTML content inside a tooltip element's title attribute. The HTML content is not rendering as expected and appears as text instead.
Let me outline the structure of my Angular project:
library.comp.html: This file contains my component code. library.comp.ts: Here, I write my TypeScript code for the component.
demo.comp.html: This is where I call my component from the library. demo.comp.ts: In this file, I manipulate the component contents and render them in demo.comp.html.
Here's a snippet of the code in my Angular project:
library.comp.html
kendoTooltip
[id]="tooltipConfig.id!"
[tooltipTemplate]="tooltipConfig.tooltipTemplate!"
[title]="tooltipConfig.title!"
[innerHTML]="tooltipConfig.text!"
[closable]="tooltipConfig.closable!"
[position]="tooltipConfig.position!"
[tooltipWidth]="tooltipConfig.tooltipWidth!"
[showOn]="tooltipConfig.showOn!"
></div>
library.comp.ts
export class AuraTooltipComponent implements OnInit {
@Input() tooltipConfig!: TooltipConfig;
demo.comp.html
<aura-tooltip [tooltipConfig]="tooltipConfig_basic"></aura-tooltip>demo.comp.ts
this.tooltipConfig_basic = {
title: "<h1>Click</h1> the button to show the tooltip with",
text: 'Tooltip1',
closable: true,
position: 'right',
tooltipWidth: 400,
id:'tooltip2'
}
**Output : **
Current Output
https://i.stack.imgur.com/lzwuG.png
**Expected Output : **
The desired result is to have the tags rendered instead of appearing as text within the tooltip title content.
As described above, I faced difficulties in rendering the HTML content properly between the component library and the demo.html. Any assistance on this matter would be highly appreciated.