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

Question

我发现了如何在HTML here

中引用的CSS类中添加一个好的悬停提示

我使用了＆＃34;标题＆＃34; 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>

但是我得到了两个悬停技巧：

我想只有一个;我怎么能把那个较小的白色呢？

Answer 1

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

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