在鼠标悬停时将工具提示添加到带有某些 class 的跨度标签

Question

我在 ts 文件中有一个 html 作为字符串。 所以我在我的 html 文件中显示了这一点。 一些 htmltext 包含带有名为 highlight 的 class 的 span 标记。 我想要的是，当我 hover 鼠标悬停在突出显示 class 上时，我必须得到一个工具提示。

这是我在 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'

我附上了我的堆栈闪电战： https://stackblitz.com/edit/angular-ivy-2dbum9?file=src%2Fapp%2Fapp.component.html

Answer 1

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

这是一个示例，其中第一个highlight元素具有 static 工具提示，其中 rest 动态生成（参见 main.ts）：

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

您还需要ViewEncapsulation才能使用 external.css

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