如何删除通用 HTML/CSS 工具提示?
How can I remove the generic HTML/CSS tooltip?
我发现如何在 CSS 类 中添加一个好的悬停提示 HTML
我结合使用了 "title" HTML 和 lharby 的 CSS。
我有这个CSS:
span:hover {
position:relative;
cursor:pointer;
}
span[title]:hover:after {
content: attr(title);
background:yellow;
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
z-index: 20;
white-space: nowrap;
}
...我的 HTML 是这样的:
<p> . . . I couldn't stood it much longer. Then for an hour it was deadly dull, and I was fidgety. Miss Watson would say,
<span class="watson" title="Miss Watson is speaking">"Don't put your feet up there, Huckleberry;"</span> and <span
class="watson" title="Miss Watson is speaking">"Don't scrunch up
like that, Huckleberry set up straight;"</span> and pretty soon she would say, <span class="watson" title="Miss
Watson is speaking">"Don't gap and stretch like that, Huckleberry why don't you try to
behave?"</span> ...</p>
但是我得到了两个悬停提示:
我只想拥有一个;小白的86怎么办?
Title auto-gens the little white one by default 所以为了不激活它我会使用 data-attr
而不是 title
因为你正在创建自己的。
span[data-attr]:hover:after {
content: attr(data-attr);
}
我发现如何在 CSS 类 中添加一个好的悬停提示 HTML
我结合使用了 "title" HTML 和 lharby 的 CSS。
我有这个CSS:
span:hover {
position:relative;
cursor:pointer;
}
span[title]:hover:after {
content: attr(title);
background:yellow;
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
z-index: 20;
white-space: nowrap;
}
...我的 HTML 是这样的:
<p> . . . I couldn't stood it much longer. Then for an hour it was deadly dull, and I was fidgety. Miss Watson would say,
<span class="watson" title="Miss Watson is speaking">"Don't put your feet up there, Huckleberry;"</span> and <span
class="watson" title="Miss Watson is speaking">"Don't scrunch up
like that, Huckleberry set up straight;"</span> and pretty soon she would say, <span class="watson" title="Miss
Watson is speaking">"Don't gap and stretch like that, Huckleberry why don't you try to
behave?"</span> ...</p>
但是我得到了两个悬停提示:
我只想拥有一个;小白的86怎么办?
Title auto-gens the little white one by default 所以为了不激活它我会使用 data-attr
而不是 title
因为你正在创建自己的。
span[data-attr]:hover:after {
content: attr(data-attr);
}