[英]add tooltip to span tag with certain class on mousehover
I have a html as a string in ts file.我在 ts 文件中有一个 html 作为字符串。 So I am displaying that in my html file.所以我在我的 html 文件中显示了这一点。 Some of the htmltext contains span tag with a class named highlight.一些 htmltext 包含带有名为 highlight 的 class 的 span 标记。 What i want is that when I hover my mouse over the highlight class I have to get a tooltip.我想要的是,当我 hover 鼠标悬停在突出显示 class 上时,我必须得到一个工具提示。
This is my string or text in the ts file.这是我在 ts 文件中的字符串或文本。 It is stored in variable named text它存储在名为 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我附上了我的堆栈闪电战: https://stackblitz.com/edit/angular-ivy-2dbum9?file=src%2Fapp%2Fapp.component.html
You can simply add title
attribute to each highlight
element to display a tooltip.您可以简单地将title
属性添加到每个highlight
元素以显示工具提示。
Here is an example where first highlight
element has a static tooltip and the rest of them generated dynamically (see main.ts):这是一个示例,其中第一个highlight
元素具有 static 工具提示,其中 rest 动态生成(参见 main.ts):
https://stackblitz.com/edit/angular-ivy-qqncae https://stackblitz.com/edit/angular-ivy-qqncae
Also you need ViewEncapsulation
in order to use external.css您还需要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"]
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.