Pure CSS tooltip - with CSS3 animation

by chrishrmnn

HTML

<a class="tooltip" href="#">Download <span>It's a PDF. </span></a></p>

CSS

body {
    background:#F5F5DC;    
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:0.85em;
    line-height:1.5em;
    color:#404040;
}

a.tooltip {
    position:relative;    
    color:#b2564e;
    text-decoration:none;
}

a.tooltip:before {
    content:"— ";
    color:#c2c2ae;
}

a.tooltip span {
    padding:5px 10px;
    background:#d1d1b7;
    border:1px solid #c7c7ac;
    border-radius:3px;
    min-width:70px;
    position:absolute;
    top:25px;
    left:5px;
    color:#404040;
    box-shadow:0px 1px 0px #fff;
    text-align:center;
    opacity:0;
    -moz-transition: opacity 1s ease; 
    -webkit-transition: opacity 1s ease;
    -o-transition:opacity 1s ease;
    transition: opacity 1s ease;
}

a.tooltip span:before {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #d1d1b7;
    z-index:5;
    content: " ";
    position:absolute;
    top:-5px;
    left:48%;
}

a.tooltip span:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #c7c7ac;
    display:block;
    content: " ";
    position:absolute;
    top:-6px;
    left:48%;
}

a.tooltip:hover span {
    opacity:1;
}