Simple html css tooltip.

Simple html css tooltip.
this is html css tooltip which is faster than jquery or javascript tooltip
simple code and paste this code in file and hover on link



<!-- css code -->
<style>
  .tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: pointer; text-decoration: none;
position: relative;
}
.tooltip span {
position: absolute;
display:none;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
display:block;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
display:block;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
display:block;
}
.classic { padding: 0.8em 1em;}
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
</style>


<!-- html code -->
<div align="center">
<a class="tooltip" href="javascript:void(0)" >Tool Tip Hover you curser here<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
</div>