Question

I’m trying to created a pure css tooltip. I have the test code here: http://jsfiddle.net/RBdn4/

The only problem with this is that in Chrome, the text is underlining on the tooltip despite having the text-decoration: none; line in the css.

Any suggestions on how to get this to stop? The link should underline, but the .tooltip text should not.

Answer 1

Chrome applies the link’s text-decoration to the <div> because it is a child of the <a>.

Add a wrapper element around the <a> and make the tooltip <div> a sibling instead of a child of the <a>. Show the tooltip when the wrapper is :hovered.

Oh, and make that CSS make sense!

HTML

<span class="wrap">
    <a href="#">this is text</a>
    <div class="tooltip"> this is a tooltip</div>
</span>

CSS

.tooltip {
    color: #000000;
    display: none;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

span.wrap:hover .tooltip {
    display: block;
}

Demo: http://jsfiddle.net/mattball/u66GT/