[英]add tooltip to span tag with certain class on mousehover
我在 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
您可以簡單地將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"]
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.