banner
Sep 18, 2013
191 Views
0 0

CSS Tool Tip

Written by
banner

CSS makes easier to make a tool tip. Now a days most of them using jquery Tool Tip, But the css Tooltip makes easy and makes less execution time. Personally I am a developer and I am also using this tooltip.
At First put your tooltip text into “rel” attribute. Then add a class “tooltip” into your HTML element.
That’s it , Your tooltip is ready.

</p> <style> .tooltip{display:inline;position:relative} .tooltip:hover{text-decoration:none} .tooltip:hover:before{ border:solid; border-color:#111 transparent; border-width:6px 6px 0 6px; bottom:12px; content:""; display:block; left:75%; position:absolute; z-index:99 } .tooltip:hover:after{ background:#333333; background:rgba(0,0,0,.8); border-radius:4px; bottom:18px; color:#fff; content:attr(rel); display:block; left:50%; padding:5px 15px; position:absolute; white-space:nowrap; z-index:100 }</p> </style> <p>&nbsp;<br />

<br /> <a rel="Settings">Settings </a><XMP><br />
Copy the code and use it. It is working in IE, Chrome ,Firefox
Share this:
Article Tags:
Article Categories:
Web Designing
banner

Hi guys, This is the place where developers are sharing there thoughts....

Comments to CSS Tool Tip

Leave a Comment

Your email address will not be published. Required fields are marked *

Result of *

Social Widgets powered by AB-WebLog.com.