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 :hover
ed.
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; }
Comments
Post a Comment