Search code examples
htmlangulartypescriptangular12

How do I set HTML content to title attribute of an image tag in Angular 12

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.

Solution

  • 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.