Tooltip Dengan CSS

Tooltip Dengan CSS

CSS Kode :

.tooltip {
    display: inline;
    position: relative;
}
.tooltip:hover {
    color: #c00;
    text-decoration: none;
}
.tooltip:hover:after {
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(51,51,51,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(51,51,51,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
background: linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#333333',GradientType=0 );  
box-shadow: 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
border-radius: 3px;
    bottom: 2.35em;
    color: #fff;
    content: attr(title);
font-size: 12px;
    display: block;
    left: 1em;
    padding: 8px 20px;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}
.tooltip:hover:before {
width: 10px;
height: 10px;
background: rgba(51,51,51,1);
-webkit-transform: rotate(45deg);
box-shadow: 1px 1px 0px 0px rgba(0,0,0,1);
    bottom: 1.5em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}
a.tooltip:link{
color:#5896c6;
text-decoration:none;
}
a.tooltip:visited{
color:#5896c6;
text-decoration:none;
}
a.tooltip:hover{
color:#5896c6;
text-decoration:none;
}
p{
font-family: Helvetica, arial, sans-serif;
color:#646464;
line-height:1.5;
display: block;
width: 140px;
margin: 100px auto;
}

HTML Kode : 

<p>Example: <a href="#" class="tooltip" title="Beautiful tooltip">Hover Me</a></p>

Contoh : 

Example: Hover Me