icon:after tooltip

auto-generate tooltips for icons via :after pseudo selector

by sprugman

HTML

<div id="container">
    foo
    <div class="icon" data-tip="there"></div>
    bar
    <div class="icon2"><span>I am hereherewher <input type="checkbox" /> whewhe.</span></div>
    baz
</div>

CSS

#container {margin: 40px}

.icon, .icon2 {
    height: 16px;
    width: 16px;
    position: relative;
    background: url('http://localhost:8080/static/images/integral-icons.png') no-repeat;
    background-position: -32px -32px;
    background-color: red;
    display: inline-block;
}

.icon:hover:after{
    content: attr(data-tip);    
}
.icon:hover:after, .icon2 span{
    position: absolute;
    left: 15px;
    top: 8px;
    padding: 3px 6px;
    background: lightyellow;
    border: 1px solid #ccc;
    border-radius: 6px;
    z-index: 1000;
}

.icon2 {
    text-indent: -5px;
    overflow: hidden;
}

.icon2:hover {
    overflow: visible;
    text-indent: 0;
}