Title attribute to make hover Tooltip

Introduction
With the help of ‘CSS3’ codes we can make title attribute to hover Tooltip without the use of any other tag.

Where it can be used?
You can use this implementation on Static or Dynamic site.

Use of jquery.
No use of any Jquery scripts.

Required CSS.

a {
color: #666666;
}

a:hover {
color: #ff0000; position: relative;
}

a[title]:hover:after {
content: attr(title); padding: 4px 8px; color: #333; position: absolute; left:0; top: 100%; z-index: 20px;

/* You can change tooltip design */

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #cccccc;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);

}

HTML

<a href=”#”title=”YOUR TEXT”>YOUR TEXT</a>
Support browser