{"id":32236,"date":"2016-02-04T17:19:00","date_gmt":"2016-02-04T11:49:00","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=32236"},"modified":"2016-02-05T10:24:29","modified_gmt":"2016-02-05T04:54:29","slug":"a-tag-attribute-to-hover-tooltip","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/a-tag-attribute-to-hover-tooltip\/","title":{"rendered":"Title attribute to make hover Tooltip"},"content":{"rendered":"

Introduction<\/strong>
\nWith the help of \u2018CSS3\u2019 codes we can make title attribute to hover Tooltip without the use of any other tag.<\/p>\n

Where it can be used?<\/strong>
\nYou can use this implementation on Static or Dynamic site.
\n<\/strong><\/p>\n

Use of jquery.<\/strong>
\nNo use of any Jquery scripts.<\/p>\n

Required CSS.<\/strong><\/p>\n

a {
\ncolor: #666666;
\n}<\/p>\n

a:hover {
\ncolor: #ff0000; position: relative;
\n}<\/p>\n

a[title]:hover:after {
\ncontent: attr(title); padding: 4px 8px; color: #333; position: absolute; left:0; top: 100%; z-index: 20px;<\/p>\n

\/* You can change tooltip design *\/<\/p>\n

-moz-border-radius: 5px;
\n-webkit-border-radius: 5px;
\nborder-radius: 5px;
\n-moz-box-shadow: 0px 0px 4px #222;
\n-webkit-box-shadow: 0px 0px 4px #222;
\nbox-shadow: 0px 0px 4px #cccccc;
\nbackground-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
\nbackground-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
\nbackground-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
\nbackground-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
\nbackground-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
\nbackground-image: -o-linear-gradient(top, #eeeeee, #cccccc);<\/p>\n

}<\/p>\n

HTML<\/strong><\/p>\n

<a href=”#”title=”YOUR TEXT”>YOUR TEXT<\/a>
\nSupport browser<\/strong><\/p>\n\n\n\n\n\n\n\n\n
Browser<\/strong><\/td>\n<\/tr>\n
FireFox 3.6+<\/td>\n<\/tr>\n
Safari 5+<\/td>\n<\/tr>\n
Chrome 6<\/td>\n<\/tr>\n
Opera 10.5+<\/td>\n<\/tr>\n
IE 9 and above<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction With the help of \u2018CSS3\u2019 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 { […]<\/p>\n","protected":false},"author":346,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":6,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-32236","post","type-post","status-publish","format-standard","hentry","category-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t