0

I found out how to add a good hover tip within CSS classes referenced in HTML here

I used a combination of the "title" HTML and lharby's CSS.

I have this 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;
}

...and my HTML is like so:

<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>

But I get two hover tips with this:

enter image description here

I would like to only have one; how can I 86 the smaller white one?

Community
  • 1
  • 1
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862

1 Answers1

1

Title auto-gens the little white one by default so to not activate it I'd use data-attr instead of title since you are creating your own.

span[data-attr]:hover:after {
    content: attr(data-attr);
}
Donnie D'Amato
  • 3,832
  • 1
  • 15
  • 40