CSS3 only Animated Tooltips

HTML

<div class="tipWrapper">
    <span class="spanlink">Fake lin</span>
    <div class="tip">text of the tooltip</div></div>

CSS

.tipWrapper   {position:relative;}
.tip   {
                    z-index:10;
                    position:absolute;
                    top:25px;
                    left:50px;
                    width:4px;
                    height:4px;
                    background-color:white;
                    border:1px solid black;
                }
.spanlink:hover~.tip   {
                                visibility:visible;
                                width:150px;
                                height:auto;
                             }

Source