web analytics

CSS Tool Tip

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

Bivash Kanti Pal

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

Leave a Reply

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

Result of *Captcha loading...

Do NOT follow this link or you will be banned from the site!