如何删除通用 HTML/CSS 工具提示？

Question

我发现如何在 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怎么办？

Answer 1

Title auto-gens the little white one by default 所以为了不激活它我会使用 data-attr 而不是 title 因为你正在创建自己的。

span[data-attr]:hover:after {
    content: attr(data-attr);
}

如何删除通用 HTML/CSS 工具提示？

How can I remove the generic HTML/CSS tooltip?

html

css

hover

tooltip