I am trying to set HTML content to the title attribute of an image tag which comes from the backend like below.

<span style="color:blue;font-weight:bold;"> <sup>superscript</sup> </span>

When I set the title using property binding and DOM sanitization, when I hover on the image it supposed to show rendered HTML but it is showing direct HTML content as it coming from the backend.

I have created the Slackblitz for the issue.

I really appreciate your help. Thank you for your help in advance.

CodePudding user response：

is your goal similar to this? take a look if you haven't seen it yet.

https://www.geeksforgeeks.org/how-to-insert-html-into-view-from-angularjs-controller/

CodePudding user response：

Title attribute accepts string and it displays as it is. In case you are looking for a functionality like tooltip, you can position the span relative to the image and then change the display property on mouseover of image.