|
|
Easy css tooltips for a tag - CSS
|
Views : 336
|
|
Tagged in : CSS
|
|
|
Report This Scrap as Inappropriate
We request you to choose the appropriate categroy and subcategory that suits your
objectionable concern about the scrap, So that our team can review and find out whether it violates our Guidelines or the
scrap is not suitable for all viewers.
|
The easiest way to give a link or anchor tag tool tip is using css.
Just copy the code in to you header create you links as explained below.
a.tip {
position: relative;
}
a.tip span {
display: none;
position: absolute;
top: 20px;
left: -10px;
width: 125px;
padding: 5px;
z-index: 100;
background: #676777;
color: #fff;
-moz-border-radius: 5px; /* this works only in camino/firefox */
-webkit-border-radius: 5px; /* this is just for Safari */
}
a:hover.tip {
font-size: 99%; /* this is just for IE */
}
a:hover.tip span {
display: block;
}
Links should be as
<a href="http://hioxindia.com/" class="tip">hioxindia.com <span>Best Web Hosting and Domain Services</span></a>
two things here to note are
1) class should be defined with the same name as the style is created. In this example class="tip"
2) what ever you want as tooltip should be give inside a tag between span tags
|
|
By - rajesh, On - 2010-01-17 |
|
|
|
