Tooltips PURE CSS

by lchau

HTML

<div id="wrapper">
    <!-- tooltip -->
    <div class="text">
        <div class="tool">
            <div class="tip"></div>
            I am a pure CSS tooltip with a transparent background, a box-shadow and a border.
        </div>   
       hover me to see the tooltip 
    </div>
    <!-- tooltip with image -->
    <div class="text">
        <div class="tool">
            <div class="tip"></div>
             <img src="http://lorempixel.com/70/50/sports/9/">
           I am just like number one but I have an image.
        </div>   
        hover me to see the tooltip. <br/>
       This box has more content but the tooltip will still be in the correct position. 
    </div>
    <!-- tooltip light -->
    <div class="text">
        <div class="tool light">
            <div class="tip"></div>
            I am just like number one but I am light with dark text.
        </div>   
       hover me to see the tooltip 
    </div>
    <!-- tooltip alert -->
    <div class="text">
        <div class="tool warning">
            <div class="tip"></div>
            I am just like number one but I have a warning sign and I am red.
        </div>   
       hover me to see the tooltip 
    </div>
</div>

CSS

body{background:url('http://lorempixel.com/700/500/sports/9/');}
#wrapper {
    padding-top:120px;

}
.text{
    display:block;
    background-image:-webkit-linear-gradient( rgba(225, 225, 225, 1), 
        rgba(195, 195, 195, 1) );
    background-image:-moz-linear-gradient( rgba(225, 225, 225, 1), 
        rgba(195, 195, 195, 1) );
    background-image:-o-linear-gradient( rgba(225, 225, 225, 1), 
        rgba(195, 195, 195, 1) );
    border: #000 1px solid;
    height:auto;
    width:200px;
    position:relative;
    left:0;
    padding:20px;
    float:left;
    margin: 20px;
    overflow:hidden;
}
.text:hover{
     overflow: visible;
}
.tool{
    height:auto;
    width:180px;
    background-image:-webkit-linear-gradient( rgba(125, 125, 125, 0.5) 50%, 
        rgba(95, 95, 95, 0.5) 50%, 
        rgba(55, 55, 55, 0.5));
    background-image:-moz-linear-gradient( rgba(125, 125, 125, 0.5) 50%, 
        rgba(95, 95, 95, 0.5) 50%, 
        rgba(55, 55, 55, 0.5));
    background-image:-o-linear-gradient( rgba(125, 125, 125, 0.5) 50%, 
        rgba(95, 95, 95, 0.5) 50%, 
        rgba(55, 55, 55, 0.5));
    position:absolute;
    left:0;
    bottom:100%;
    margin-bottom:20px;
    padding:10px;
    color:rgb(255,255,255);
    text-shadow: 0 1px 0 rgb(0,0,0);
    border: 2px solid rgba(255,255,255,1);
    border-bottom:0;
    opacity: 1;
    z-index:0;
    border-radius:10px;
    font-family:Helvetica, Arial, Verdana, sans-serif;
    font-size:13px;
    font-weight:bold;
}


.tool:before{
    content:'';
    width:25px;
    height:15px;
    border-bottom: 2px solid rgba(255,255,255,1);
    border-left: 2px solid rgba(255,255,255,1);
    position:absolute;
    bottom:0;
    left:-2px;
    border-bottom-left-radius:10px;
    box-shadow: -1px 3px 2px -1px rgba(0,0,0,0.8);
    
}
.tool:after{
    content:'';
    width:148px;
    height:15px;
    border-bottom: 2px solid rgba(255,255,255,1);
    border-right: 2px solid rgba(255,255,255,1);
    position:absolute;
   ...