hover - creating css tooltip formatting issue with underlines in a tag -


i'm trying created pure css tooltip. have test code here: http://jsfiddle.net/rbdn4/

the problem in chrome, text underlining on tooltip despite having text-decoration: none; line in css.

any suggestions on how stop? link should underline, .tooltip text should not.

chrome applies link's text-decoration <div> because child of <a>.

add wrapper element around <a> , make tooltip <div> sibling instead of child of <a>. show tooltip when wrapper :hovered.

oh, , make css make sense!

html

<span class="wrap">     <a href="#">this text</a>     <div class="tooltip"> 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/


Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -