在mousehover上添加带有特定类的span标记的工具提示

Question

我在ts文件中有一个html作为字符串。所以我将它显示在我的html文件中。有些htmltext包含span标记，其类名为highlight。我想要的是，当我将鼠标悬停在highlight类上时，我必须得到一个工具提示。

这是我在ts文件中的字符串或文本。它存储在名为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'

我已附加了我的StackBlitz:https://stackblitz.com/edit/Angular-ivy-2dbum9？file=src%2fapp%2fapp.component.html

Answer 1

您可以简单地将title属性添加到每个highlight元素以显示工具提示。

下面是一个示例，其中第一个highlight元素有一个静态工具提示，其余的工具提示是动态生成的（请参阅main.ts）：

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

此外，您还需要viewencapsulation才能使用外部.css

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