tooltip via :after & :hove:after

by JakobJingleheimer

HTML

<p>This is an example <span data-descr="collection of words and punctuation">text</span> with a few <span data-descr="small popups which also hide again">tooltips</span>. Take a <span data-descr="not to be taken literally">look</span>...
</p>

CSS

span {
    position: relative;
    text-decoration: underline;
    color: #00F;
    cursor: help;
}

span:after {
    content: attr(data-descr);
    position: absolute;
    left: 0;
    top: 24px;
    min-width: 200px;
    border: 1px #aaaaaa solid;
    border-radius: 10px;
    background-color: #ffffcc;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
}

span:hover:after {
    zoom: 1; 
    filter: alpha(opacity=100);
    opacity:1;
}