Title attribute to make hover Tooltip

04 / Feb / 2016 by Bhushan Aloria 0 comments

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

Browser
FireFox 3.6+
Safari 5+
Chrome 6
Opera 10.5+
IE 9 and above

 

Tag -

FOUND THIS USEFUL? SHARE IT

Leave a comment -