Simple CSS tooltip

by tnhu

HTML

<p>This is a ton of text, let's keep typing so that this actually spans multiple lines. Hopefully all of these words will accomplish the objective of increasing the size of this paragraph, without causing headaches. Finally, let's see if it works with a <span class="has-tooltip">tooltip<span class="tooltip">tool tip text! woo!</span></span>.</p>

CSS

body{
    padding:40px;
}
.has-tooltip{
    position: relative;
    cursor: pointer;
    text-decoration:underline;
    color:#888888;
}
.tooltip{
    display: block;
    position: absolute;
    background-color:#FBFBFB;
    color:#222222;
    border:1px solid #cccccc;
    width:0;
    height:0;
    opacity:0;
    top:-5px;
    padding:3px 6px;
    transition: opacity 0.5s, top 0.5s;
    text-indent:-9999px;
    box-shadow:1px 1px 2px #cccccc;
}
.has-tooltip:hover > .tooltip{
    top: -24px;
    left: 5px;
    height:auto;
    width:auto;
    opacity:1;
    white-space:nowrap;
    text-indent:0;
}