{"id":1219,"date":"2009-07-21T12:16:59","date_gmt":"2009-07-21T12:16:59","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=1219"},"modified":"2018-11-15T12:46:38","modified_gmt":"2018-11-15T12:46:38","slug":"css-tooltip-without-using-javascript","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/07\/css-tooltip-without-using-javascript\/","title":{"rendered":"Css Tooltip Without Using Javascript"},"content":{"rendered":"<p>In this i tutorial i will show you how to create css tooltip without using javascript this very simple and effective technique. I  hope you will enjoy this post.<br \/>\n<!--more--><br \/>\nHere is the Screenshot<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/tooltip.jpg\" alt=\"tooltip\" title=\"tooltip\" width=\"563\" height=\"237\" class=\"alignnone size-full wp-image-1220\" srcset=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/tooltip.jpg 563w, http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/tooltip-300x126.jpg 300w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/p>\n<h2>Step : 1 Basic Css Code<\/h2>\n<pre>\r\n[code lang=\"css\"]\r\n*{margin:0; padding:0;}\r\nbody{font:100% normal Arial, Helvetica, sans-serif; }\r\np{color:#666; font-size:12px; line-height:150%; margin:0 0 10px 0;}\r\n#page{ margin:0 auto; width:550px;}\r\n[\/code]\r\n<\/pre>\n<p><strong>Here is the magic code <\/strong><\/p>\n<pre>\r\n[code lang=\"css\"]\r\na{color:#F00; font-size:12px;}\r\n\r\na:hover {   \r\n    background:#fff;     \/*background color for IE*\/   \r\n    text-decoration:none;   \r\n}    \r\n  \r\na.tooltip span {   \r\n    display:none;    \r\n    padding:5px 5px;    \r\n    margin-left:3px; \r\n\tmargin-top:10px;   \r\n    width:170px;\r\n\tfont-size:12px;\r\n\tline-height:150%;\r\n}   \r\n  \r\na.tooltip:hover span{   \r\n    display:inline;    \r\n    position:absolute;    \r\n    background:#F20F27;    \r\n    border:1px solid #C30018;    \r\n    color:#fff;\r\n}   \r\n[\/code]\r\n<\/pre>\n<h2>Step: 2 Basic HTML Structure<\/h2>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<div id=\"page\">\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra \r\ndui nec risus. In eu neque a tortor lacinia rhoncus. In interdum Lorem \r\nipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec \r\nrisus.<\/SPAN><\/a>  Lorem ipsum dolor sit amet, consectetur adipiscing\r\n elit. Suspendisse potenti.Lorem ipsum dolor sit amet,<\/p>  \r\n\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra \r\ndui nec risus. In eu neque a tortor lacinia rhoncus. In interdum\r\n <a href=\"#\" class=\"tooltip\">placerat<SPAN>Lorem ipsum dolor sit \r\namet, consectetur adipiscing elit. Ut viverra dui nec risus.<\/SPAN><\/a>\r\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse \r\npotenti.Lorem ipsum dolor sit amet,<\/p> \r\n \r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra\r\n dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum Lorem \r\nipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec \r\nrisus.<\/SPAN><\/a>  Lorem ipsum dolor sit amet, consectetur adipiscing\r\n elit. Suspendisse potenti.Lorem ipsum dolor sit amet,<\/p>  \r\n<\/div>\r\n[\/code]\r\n<\/pre>\n<p>Finally we have created three column css layout.<br \/>\n<strong><a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/tooltip.rar'>Download<\/a> | <a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/css-tooltip-no-javascript.html'>View Demo<\/a><\/strong><\/p>\n<p>Please share your comments with us, we\u2019d love to hear from you\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this i tutorial i will show you how to create css tooltip without using javascript this very simple and effective technique. I hope you will enjoy this post.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[52,23],"class_list":["post-1219","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/1219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=1219"}],"version-history":[{"count":14,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/1219\/revisions"}],"predecessor-version":[{"id":1236,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/1219\/revisions\/1236"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=1219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=1219"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=1219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}