Css Tooltip Without Using Javascript
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
*{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;}
Here is the magic code
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;
}
Step: 2 Basic HTML Structure
<div id="page">
<p>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.</SPAN></a> Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse potenti.Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra
dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum
<a href="#" class="tooltip">placerat<SPAN>Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Ut viverra dui nec risus.</SPAN></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
potenti.Lorem ipsum dolor sit amet,</p>
<p>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.</SPAN></a> Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse potenti.Lorem ipsum dolor sit amet,</p>
</div>
Finally we have created three column css layout.
Download | View Demo
Please share your comments with us, we’d love to hear from you…
Promote Us
Related Articles:
if you enjoyed reading this article, please check out other related articles below:
Loading...
column spansays on : April 4th, 2010 at 1:29 am Said:
[...] DevelopmentTableLayout support column span via layout_span and column stretch via stretchColumnsCss Tooltip Without Using Javascript, Tutorial, Css | Ace …In this i tutorial i will show you how to create css tooltip without using javascript this very [...]