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.
Here is the Screenshot
Step : 1 Basic Css Code
[code lang="css"] *{margin:0; padding:0;} body{font:100% normal Arial, Helvetica, sans-serif; } p{color:#666; font-size:12px; line-height:150%; margin:0 0 10px 0;} #page{ margin:0 auto; width:550px;} [/code]
Here is the magic code
[code lang="css"] a{color:#F00; font-size:12px;} a:hover { background:#fff; /*background color for IE*/ text-decoration:none; } a.tooltip span { display:none; padding:5px 5px; margin-left:3px; margin-top:10px; width:170px; font-size:12px; line-height:150%; } a.tooltip:hover span{ display:inline; position:absolute; background:#F20F27; border:1px solid #C30018; color:#fff; } [/code]
Step: 2 Basic HTML Structure
[code lang="htmlstrict"][/code]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum placeratLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet,
Finally we have created three column css layout.
Download | View Demo
Please share your comments with us, we’d love to hear from you…
Pingback: column span
premature babies wikipedia https://aralenchloroquinex.com/# chloroquine side effects