add tooltip to span tag with certain class on mousehover

Question

I have a html as a string in ts file. So I am displaying that in my html file. Some of the htmltext contains span tag with a class named highlight. What i want is that when I hover my mouse over the highlight class I have to get a tooltip.

This is my string or text in the ts file. It is stored in variable named text

'<span class="highlight">It is a long</span> established fact that a <span ​lass="highlight">re</span><span class="highlight"></span><span class="highlight">ader </span>will be distracted by the <span class="highlight">readable content </span>of a page when <span class="highlight">look</span><span class="highlight"></span><span class="highlight">ing </span>at its layout. The point of using Lorem Ipsum'

I have attached my stackblitz: https://stackblitz.com/edit/angular-ivy-2dbum9?file=src%2Fapp%2Fapp.component.html

Answer 1

You can simply add title attribute to each highlight element to display a tooltip.

Here is an example where first highlight element has a static tooltip and the rest of them generated dynamically (see main.ts):

https://stackblitz.com/edit/angular-ivy-qqncae

Also you need ViewEncapsulation in order to use external.css

import { Component, VERSION, ViewEncapsulation } from "@angular/core";
@Component({
  encapsulation: ViewEncapsulation.None,
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})